From fb2653ecc8846383a5dadd5574aa0c4970e0c69e Mon Sep 17 00:00:00 2001 From: liuzhihang Date: Sat, 5 Nov 2022 00:43:20 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=B0=83=E6=95=B4=20js=20css?= =?UTF-8?q?=20=EF=BC=88=E6=9C=AA=E8=B0=83=E6=95=B4=E5=AE=8C=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/assets/js/heo.js | 458 +- templates/assets/js/main.js | 1036 ++++- templates/assets/js/utils.js | 180 +- templates/assets/zhheo/blogex.js | 1005 ++-- templates/assets/zhheo/commentBarrage.css | 165 + templates/assets/zhheo/commentBarrage.js | 150 + templates/assets/zhheo/rightmenu.js | 701 +-- templates/assets/zhheo/zhheoblog.css | 5057 +++++++++++++++------ templates/modules/layouts/layout.html | 6 + 9 files changed, 6566 insertions(+), 2192 deletions(-) create mode 100644 templates/assets/zhheo/commentBarrage.css create mode 100644 templates/assets/zhheo/commentBarrage.js diff --git a/templates/assets/js/heo.js b/templates/assets/js/heo.js index 7e65c338..df13f2a8 100644 --- a/templates/assets/js/heo.js +++ b/templates/assets/js/heo.js @@ -1,126 +1,460 @@ -"use strict"; -var heo_keyboard = !0, heo = { +let heo_cookiesTime = null; +let heo_musicPlaying = false; +let heo_keyboard = false; +let heo_intype = false; +// 私有函数 +var heo = { + // 检测显示模式 darkModeStatus: function () { - "light" == ("dark" === document.documentElement.getAttribute("data-theme") ? "dark" : "light") ? $(".menu-darkmode-text").text("深色模式") : $(".menu-darkmode-text").text("浅色模式") + let theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' + if (theme == 'light') { + $(".menu-darkmode-text").text("深色模式"); + } else { + $(".menu-darkmode-text").text("浅色模式"); + } }, + //bb添加时间 + changeTimeInEssay: function () { + const relativeDate = function (selector) { + selector.forEach(item => { + const $this = item + const timeVal = $this.getAttribute('datetime') + $this.innerText = btf.diffDate(timeVal, true) + $this.style.display = 'inline' + }) + } + + if (document.querySelector('#bber')) { + relativeDate(document.querySelectorAll('#bber time')) + } + }, + + // 首页bb + initIndexEssay: function () { + if (document.querySelector('#bber-talk')) { + var swiper = new Swiper('.swiper-container', { + direction: 'vertical', // 垂直切换选项 + loop: true, + autoplay: { + delay: 3000, + pauseOnMouseEnter: true + }, + }); + } + }, + + + // 只在首页显示 onlyHome: function () { - var e = window.location.pathname; - "/" == (e = decodeURIComponent(e)) ? $(".only-home").attr("style", "display: flex") : $(".only-home").attr("style", "display: none") + var urlinfo = window.location.pathname; + urlinfo = decodeURIComponent(urlinfo); + if (urlinfo == '/') { + $('.only-home').attr('style', 'display: flex'); + } else { + $('.only-home').attr('style', 'display: none'); + } }, + //是否在首页 is_Post: function () { - return 0 <= window.location.href.indexOf("/p/") + var url = window.location.href; //获取url + if (url.indexOf("/p/") >= 0) { //判断url地址中是否包含code字符串 + return true; + } else { + return false; + } }, + + //监测是否在页面开头 addNavBackgroundInit: function () { - var e, t = 0, o = 0; - document.body && (t = document.body.scrollTop), document.documentElement && (o = document.documentElement.scrollTop), e = 0 < t - o ? t : o, 0 != e && (document.getElementById("page-header").classList.add("nav-fixed"), document.getElementById("page-header").classList.add("nav-visible"), $("#cookies-window").hide(), console.log("已添加class")) + var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; + if (document.body) { + bodyScrollTop = document.body.scrollTop; + } + if (document.documentElement) { + documentScrollTop = document.documentElement.scrollTop; + } + scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; + // console.log("滚动高度"+ scrollTop) + + if (scrollTop != 0) { + document.getElementById("page-header").classList.add("nav-fixed"); + document.getElementById("page-header").classList.add("nav-visible"); + $('#cookies-window').hide() + console.log("已添加class") + } }, + // 标签页面 + //分类条 tagPageActive: function () { - var e = window.location.pathname, e = decodeURIComponent(e); - console.log(e); - var t, o, n = /\/tags\/.*?\//.test(e); - console.log(n), n && (t = e.split("/"), console.log(t[2]), o = t[2], document.querySelector("#tag-page-tags") && document.getElementById(o).classList.add("select")) + var urlinfo = window.location.pathname; + urlinfo = decodeURIComponent(urlinfo) + // console.log(urlinfo); + // 验证是否是分类链接 + var pattern = /\/tags\/.*?\//; + var patbool = pattern.test(urlinfo); + // console.log(patbool); + // 获取当前的分类 + if (patbool) { + var valuegroup = urlinfo.split("/"); + // console.log(valuegroup[2]); + // 获取当前分类 + var nowCategorie = valuegroup[2]; + if (document.querySelector('#tag-page-tags')) { + $('a').removeClass('select') + document.getElementById(nowCategorie).classList.add("select"); + } + } }, + //分类条 categoriesBarActive: function () { - document.querySelector("#category-bar") && $(".category-bar-item").removeClass("select"); - var e, t = window.location.pathname, t = decodeURIComponent(t); - "/" == t ? document.querySelector("#category-bar") && document.getElementById("category-bar-home").classList.add("select") : /\/categories\/.*?\//.test(t) && (e = t.split("/")[2], document.querySelector("#category-bar") && document.getElementById(e).classList.add("select")) + if (document.querySelector('#category-bar')) { + $(".category-bar-item").removeClass("select") + } + var urlinfo = window.location.pathname; + urlinfo = decodeURIComponent(urlinfo); + // console.log(urlinfo); + //判断是否是首页 + if (urlinfo == '/') { + if (document.querySelector('#category-bar')) { + document.getElementById('category-bar-home').classList.add("select"); + } + } else { + // 验证是否是分类链接 + var pattern = /\/categories\/.*?\//; + var patbool = pattern.test(urlinfo); + // console.log(patbool); + // 获取当前的分类 + if (patbool) { + var valuegroup = urlinfo.split("/"); + // console.log(valuegroup[2]); + // 获取当前分类 + var nowCategorie = valuegroup[2]; + if (document.querySelector('#category-bar')) { + document.getElementById(nowCategorie).classList.add("select"); + } + } + } }, + // 页脚友链 + addFriendLinksInFooter: function () { + var fetchUrl = "https://moments.zhheo.com/randomfriend?num=3" + fetch(fetchUrl) + .then(res => res.json()) + .then(json => { + var randomFriendLinks = getArrayItems(json, 3); + + var htmlText = ''; + for (let i = 0; i < randomFriendLinks.length; ++i) { + var item = randomFriendLinks[i] + htmlText += `${item.name}`; + } + htmlText += `更多` + document.getElementById("friend-links-in-footer").innerHTML = htmlText; + }) + }, + + //禁止图片右键单击 stopImgRightDrag: function () { - $("img").on("dragstart", function () { - return !1 - }) + var img = $("img"); + img.on("dragstart", function () { + return false; + }); }, + //置顶文章横向滚动 topPostScroll: function () { - var o; - document.getElementById("recent-post-top") && (o = document.getElementById("recent-post-top")).addEventListener("mousewheel", function (e) { - var t = -e.wheelDelta / 2; - o.scrollLeft += t, document.body.clientWidth < 1300 && e.preventDefault() - }, !1) + if (document.getElementById("recent-post-top")) { + let xscroll = document.getElementById("recent-post-top"); + xscroll.addEventListener("mousewheel", function (e) { + //计算鼠标滚轮滚动的距离 + let v = -e.wheelDelta / 2; + xscroll.scrollLeft += v; + //阻止浏览器默认方法 + if (document.body.clientWidth < 1300) { + e.preventDefault(); + } + }, false); + } }, topCategoriesBarScroll: function () { - var o; - document.getElementById("category-bar-items") && (o = document.getElementById("category-bar-items")).addEventListener("mousewheel", function (e) { - var t = -e.wheelDelta / 2; - o.scrollLeft += t, e.preventDefault() - }, !1) + if (document.getElementById("category-bar-items")) { + let xscroll = document.getElementById("category-bar-items"); + xscroll.addEventListener("mousewheel", function (e) { + //计算鼠标滚轮滚动的距离 + let v = -e.wheelDelta / 2; + xscroll.scrollLeft += v; + //阻止浏览器默认方法 + e.preventDefault(); + }, false); + } }, + //作者卡片问好 sayhi: function () { - document.querySelector("#author-info__sayhi") && (document.getElementById("author-info__sayhi").innerHTML = getTimeState() + "！我是") + if (document.querySelector('#author-info__sayhi')) { + document.getElementById("author-info__sayhi").innerHTML = getTimeState() + "！我是"; + } }, + // 添加标签 addTag: function () { - document.querySelector(".heo-tag-new") && $(".heo-tag-new").append('N'), document.querySelector(".heo-tag-hot") && $(".heo-tag-hot").append('H') + //添加new标签 + if (document.querySelector('.heo-tag-new')) { + $(".heo-tag-new").append(`N`) + } + //添加hot标签 + if (document.querySelector('.heo-tag-hot')) { + $(".heo-tag-hot").append(`H`) + } }, + // 二维码 qrcodeCreate: function () { - document.getElementById("qrcode") && new QRCode(document.getElementById("qrcode"), { - text: window.location.href, - width: 250, - height: 250, - colorDark: "#000", - colorLight: "#ffffff", - correctLevel: QRCode.CorrectLevel.H - }) + if (document.getElementById('qrcode')) { + document.getElementById("qrcode").innerHTML = ""; + var qrcode = new QRCode(document.getElementById("qrcode"), { + text: window.location.href, + width: 250, + height: 250, + colorDark: "#000", + colorLight: "#ffffff", + correctLevel: QRCode.CorrectLevel.H + }); + } }, + // 刷新即刻短文瀑布流 reflashEssayWaterFall: function () { - document.querySelector("#waterfall") && setTimeout(function () { - waterfall("#waterfall"), document.getElementById("waterfall").classList.add("show") - }, 500) + if (document.querySelector('#waterfall')) { + setTimeout(function () { + waterfall('#waterfall'); + document.getElementById("waterfall").classList.add('show'); + }, 500); + } }, + // 即刻短文添加灯箱 addMediumInEssay: function () { - document.querySelector("#waterfall") && mediumZoom(document.querySelectorAll("[data-zoomable]")) + if (document.querySelector('#waterfall')) { + mediumZoom(document.querySelectorAll('[data-zoomable]')) + } }, - downloadImage: function (e, c) { - rm.hideRightMenu(), 0 == rm.downloadimging ? (rm.downloadimging = !0, btf.snackbarShow("正在下载中，请稍后", !1, 1e4), setTimeout(function () { - var a = new Image; - a.setAttribute("crossOrigin", "anonymous"), a.onload = function () { - var e = document.createElement("canvas"); - e.width = a.width, e.height = a.height, e.getContext("2d").drawImage(a, 0, 0, a.width, a.height); - var t = e.toDataURL("image/png"), o = document.createElement("a"), n = new MouseEvent("click"); - o.download = c || "photo", o.href = t, o.dispatchEvent(n) - }, a.src = e, btf.snackbarShow("图片已添加盲水印，请遵守版权协议"), rm.downloadimging = !1 - }, "10000")) : btf.snackbarShow("有正在进行中的下载，请稍后再试") + // 下载图片 + downloadImage: function (imgsrc, name) { //下载图片地址和图片名 + rm.hideRightMenu(); + if (rm.downloadimging == false) { + rm.downloadimging = true; + btf.snackbarShow('正在下载中，请稍后', false, 10000) + setTimeout(function () { + let image = new Image(); + // 解决跨域 Canvas 污染问题 + image.setAttribute("crossOrigin", "anonymous"); + image.onload = function () { + let canvas = document.createElement("canvas"); + canvas.width = image.width; + canvas.height = image.height; + let context = canvas.getContext("2d"); + context.drawImage(image, 0, 0, image.width, image.height); + let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据 + let a = document.createElement("a"); // 生成一个a元素 + let event = new MouseEvent("click"); // 创建一个单击事件 + a.download = name || "photo"; // 设置图片名称 + a.href = url; // 将生成的URL设置为a.href属性 + a.dispatchEvent(event); // 触发a的单击事件 + }; + image.src = imgsrc; + btf.snackbarShow('图片已添加盲水印，请遵守版权协议'); + rm.downloadimging = false; + }, "10000"); + } else { + btf.snackbarShow('有正在进行中的下载，请稍后再试'); + } }, - changeThemeColor: function (e) { - null !== document.querySelector('meta[name="theme-color"]') && document.querySelector('meta[name="theme-color"]').setAttribute("content", e) + //控制评论弹幕 + switchCommentBarrage: function () { + let commentBarrage = document.querySelector('.comment-barrage'); + if (commentBarrage) { + if ($(".comment-barrage").is(":visible")) { + $(".comment-barrage").hide(); + $(".menu-commentBarrage-text").text("显示热评"); + document.querySelector("#consoleCommentBarrage").classList.remove("on"); + localStorage.setItem('commentBarrageSwitch', 'false'); + } else if ($(".comment-barrage").is(":hidden")) { + $(".comment-barrage").show(); + $(".menu-commentBarrage-text").text("关闭热评"); + document.querySelector("#consoleCommentBarrage").classList.add("on"); + localStorage.removeItem('commentBarrageSwitch'); + } + } + rm.hideRightMenu(); }, + //隐藏cookie窗口 + hidecookie: function () { + heo_cookiesTime = setTimeout(() => { + document.getElementById("cookies-window").classList.add('cw-hide'); + setTimeout(() => { + $('#cookies-window').hide() + }, 1000) + }, 3000) + }, + + //隐藏今日推荐 + hideTodayCard: function () { + if (document.getElementById("todayCard")) { + document.getElementById("todayCard").classList.add('hide'); + } + }, + + //更改主题色 + changeThemeColor: function (color) { + if (document.querySelector('meta[name="theme-color"]') !== null) { + document.querySelector('meta[name="theme-color"]').setAttribute('content', color) + } + }, + + //自适应主题色 initThemeColor: function () { - var e, t, o; - heo.is_Post() ? 0 === (window.scrollY || document.documentElement.scrollTop) ? (e = getComputedStyle(document.documentElement).getPropertyValue("--heo-main"), heo.changeThemeColor(e)) : (t = getComputedStyle(document.documentElement).getPropertyValue("--heo-background"), heo.changeThemeColor(t)) : (o = getComputedStyle(document.documentElement).getPropertyValue("--heo-background"), heo.changeThemeColor(o)) + if (heo.is_Post()) { + const currentTop = window.scrollY || document.documentElement.scrollTop + if (currentTop === 0) { + let themeColor = getComputedStyle(document.documentElement).getPropertyValue('--heo-main'); + heo.changeThemeColor(themeColor); + } else { + let themeColor = getComputedStyle(document.documentElement).getPropertyValue('--heo-background'); + heo.changeThemeColor(themeColor); + } + } else { + let themeColor = getComputedStyle(document.documentElement).getPropertyValue('--heo-background'); + heo.changeThemeColor(themeColor); + } }, + //跳转到指定位置 + jumpTo: function (dom) { + $(document).ready(function () { + $("html,body").animate({ + scrollTop: $(dom).eq(i).offset().top + }, 500 /*scroll实现定位滚动*/); /*让整个页面可以滚动*/ + }); + }, + //显示加载动画 showLoading: function () { - document.querySelector("#loading-box").classList.remove("loaded") + document.querySelector("#loading-box").classList.remove("loaded"); + let cardColor = getComputedStyle(document.documentElement).getPropertyValue('--heo-card-bg'); + heo.changeThemeColor(cardColor); }, + //隐藏加载动画 hideLoading: function () { - document.querySelector("#loading-box").classList.add("loaded") + document.querySelector("#loading-box").classList.add("loaded"); }, + //切换音乐播放状态 + musicToggle: function () { + let msgPlay = '播放音乐' // 此處可以更改為你想要顯示的文字 + let msgPause = '暂停音乐' // 同上，但兩處均不建議更改 + if (heo_musicPlaying) { + document.querySelector("#nav-music").classList.remove("playing"); + document.getElementById("menu-music-toggle").innerHTML = msgPlay; + document.getElementById("nav-music-hoverTips").innerHTML = "音乐已暂停"; + document.querySelector("#consoleMusic").classList.remove("on"); + heo_musicPlaying = false; + } else { + document.querySelector("#nav-music").classList.add("playing"); + document.getElementById("menu-music-toggle").innerHTML = msgPause; + document.querySelector("#consoleMusic").classList.add("on"); + heo_musicPlaying = true; + } + document.querySelector('meting-js').aplayer.toggle(); + rm.hideRightMenu(); + }, + + //音乐上一曲 + musicSkipBack: function () { + document.querySelector('meting-js').aplayer.skipBack(); + rm.hideRightMenu(); + }, + + //音乐下一曲 + musicSkipForward: function () { + document.querySelector('meting-js').aplayer.skipForward(); + rm.hideRightMenu(); + }, + + //获取音乐中的名称 + musicGetName: function () { + var x = $('.aplayer-title') + // var x = document.getElementsByClassName('txt'); + // for (var i = x.length - 1; i >= 0; i--) { + // console.log(x[i].innerText) + // } + var arr = [] + for (var i = x.length - 1; i >= 0; i--) { + arr[i] = x[i].innerText + // console.log(x[i].innerText) + } + return arr[0] + }, + + //显示中控台 showConsole: function () { - document.querySelector("#console").classList.add("show") + document.querySelector("#console").classList.add("show"); + heo.initConsoleState(); }, + //隐藏中控台 hideConsole: function () { - document.querySelector("#console").classList.remove("show") + document.querySelector("#console").classList.remove("show"); }, + //快捷键功能开关 keyboardToggle: function () { - heo_keyboard ? (heo_keyboard = !1, document.querySelector("#consoleKeyboard").classList.remove("on"), localStorage.setItem("keyboardToggle", "false")) : (heo_keyboard = !0, document.querySelector("#consoleKeyboard").classList.add("on"), localStorage.setItem("keyboardToggle", "true")) + if (heo_keyboard) { + heo_keyboard = false; + document.querySelector("#consoleKeyboard").classList.remove("on"); + localStorage.setItem('keyboardToggle', 'false'); + } else { + heo_keyboard = true; + document.querySelector("#consoleKeyboard").classList.add("on"); + localStorage.setItem('keyboardToggle', 'true'); + } + }, + + //滚动到指定id + scrollTo: function (id) { + var domTop = document.querySelector(id).offsetTop; + window.scrollTo(0, domTop - 80); + }, + + //隐藏侧边栏 + hideAsideBtn: () => { // Hide aside + const $htmlDom = document.documentElement.classList + $htmlDom.contains('hide-aside') + ? saveToLocal.set('aside-status', 'show', 2) + : saveToLocal.set('aside-status', 'hide', 2) + $htmlDom.toggle('hide-aside') + $htmlDom.contains('hide-aside') + ? document.querySelector("#consoleHideAside").classList.add("on") + : document.querySelector("#consoleHideAside").classList.remove("on") + }, + + //初始化console图标 + initConsoleState: function () { + //初始化隐藏边栏 + const $htmlDom = document.documentElement.classList + $htmlDom.contains('hide-aside') + ? document.querySelector("#consoleHideAside").classList.add("on") + : document.querySelector("#consoleHideAside").classList.remove("on") } -}; \ No newline at end of file +} \ No newline at end of file diff --git a/templates/assets/js/main.js b/templates/assets/js/main.js index eb5ef58e..b25b9b5a 100644 --- a/templates/assets/js/main.js +++ b/templates/assets/js/main.js @@ -1,256 +1,884 @@ -"use strict"; +document.addEventListener('DOMContentLoaded', function () { + const $blogName = document.getElementById('site-name') + let blogNameWidth = $blogName && $blogName.offsetWidth + const $menusEle = document.querySelector('#menus .menus_items') + let menusWidth = $menusEle && $menusEle.offsetWidth + const $searchEle = document.querySelector('#search-button') + let searchWidth = $searchEle && $searchEle.offsetWidth -document.addEventListener("DOMContentLoaded", function () { + const adjustMenu = (change = false) => { + if (change) { + blogNameWidth = $blogName && $blogName.offsetWidth + menusWidth = $menusEle && $menusEle.offsetWidth + searchWidth = $searchEle && $searchEle.offsetWidth + } + const $nav = document.getElementById('nav') + let t + if (window.innerWidth < 768) t = true + else t = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120 - - let $siteName = document.getElementById("site-name"); - let blogNameWidth = $siteName && $siteName.offsetWidth; - let $menusEle = document.querySelector("#menus .menus_items"); - let menusWidth = $menusEle && $menusEle.offsetWidth; - let $search = document.querySelector("#search-button"); - let searchWidth = $search && $search.offsetWidth; - let $nav = document.getElementById("nav"); - - // 菜单栏调整 - function adjustMenu(init) { - - 0 < arguments.length && void 0 !== init && init && (blogNameWidth = $siteName && $siteName.offsetWidth, menusWidth = $menusEle && $menusEle.offsetWidth, searchWidth = $search && $search.offsetWidth); - - if (window.innerWidth < 768 || blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120) { - $nav.classList.add("hide-menu") + if (t) { + $nav.classList.add('hide-menu') } else { - $nav.classList.remove("hide-menu") + $nav.classList.remove('hide-menu') } } // 初始化header const initAdjust = () => { - adjustMenu(true); - $nav.classList.add("show"); - }; + adjustMenu() + document.getElementById('nav').classList.add('show') + } - // 滚动处理 - function scrollFn() { + // sidebar menus + const sidebarFn = () => { + const $toggleMenu = document.getElementById('toggle-menu') + const $mobileSidebarMenus = document.getElementById('sidebar-menus') + const $menuMask = document.getElementById('menu-mask') + const $body = document.body - const innerHeight = window.innerHeight + 56; + function openMobileSidebar() { + btf.sidebarPaddingR() + $body.style.overflow = 'hidden' + btf.fadeIn($menuMask, 0.5) + $mobileSidebarMenus.classList.add('open') + } + + function closeMobileSidebar() { + $body.style.overflow = '' + $body.style.paddingRight = '' + btf.fadeOut($menuMask, 0.5) + $mobileSidebarMenus.classList.remove('open') + } + + $toggleMenu.addEventListener('click', openMobileSidebar) + + $menuMask.addEventListener('click', e => { + if ($mobileSidebarMenus.classList.contains('open')) { + closeMobileSidebar() + } + }) + + window.addEventListener('resize', e => { + if (btf.isHidden($toggleMenu)) { + if ($mobileSidebarMenus.classList.contains('open')) closeMobileSidebar() + } + }) + } + + /** + * 首頁top_img底下的箭頭 + */ + const scrollDownInIndex = () => { + const $scrollDownEle = document.getElementById('scroll-down') + $scrollDownEle && $scrollDownEle.addEventListener('click', function () { + btf.scrollToDest(document.getElementById('content-inner').offsetTop, 300) + }) + } + + /** + * 代碼 + * 只適用於Hexo默認的代碼渲染 + */ + // const addHighlightTool = function () { + // const highLight = GLOBAL_CONFIG.highlight + // if (!highLight) return + // + // const isHighlightCopy = highLight.highlightCopy + // const isHighlightLang = highLight.highlightLang + // const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink + // const highlightHeightLimit = highLight.highlightHeightLimit + // const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined + // const $figureHighlight = highLight.plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]') + // + // if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return + // + // const isPrismjs = highLight.plugin === 'prismjs' + // + // let highlightShrinkEle = '' + // let highlightCopyEle = '' + // const highlightShrinkClass = isHighlightShrink === true ? 'closed' : '' + // + // if (isHighlightShrink !== undefined) { + // highlightShrinkEle = `` + // } + // + // if (isHighlightCopy) { + // highlightCopyEle = '
' + // } + // + // const copy = (text, ctx) => { + // if (document.queryCommandSupported && document.queryCommandSupported('copy')) { + // document.execCommand('copy') + // if (GLOBAL_CONFIG.Snackbar !== undefined) { + // btf.snackbarShow(GLOBAL_CONFIG.copy.success) + // } else { + // const prevEle = ctx.previousElementSibling + // prevEle.innerText = GLOBAL_CONFIG.copy.success + // prevEle.style.opacity = 1 + // setTimeout(() => { + // prevEle.style.opacity = 0 + // }, 700) + // } + // } else { + // if (GLOBAL_CONFIG.Snackbar !== undefined) { + // btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport) + // } else { + // ctx.previousElementSibling.innerText = GLOBAL_CONFIG.copy.noSupport + // } + // } + // } + // + // // click events + // const highlightCopyFn = (ele) => { + // const $buttonParent = ele.parentNode + // $buttonParent.classList.add('copy-true') + // const selection = window.getSelection() + // const range = document.createRange() + // if (isPrismjs) range.selectNodeContents($buttonParent.querySelectorAll('pre code')[0]) + // else range.selectNodeContents($buttonParent.querySelectorAll('table .code pre')[0]) + // selection.removeAllRanges() + // selection.addRange(range) + // const text = selection.toString() + // copy(text, ele.lastChild) + // selection.removeAllRanges() + // $buttonParent.classList.remove('copy-true') + // } + // + // const highlightShrinkFn = (ele) => { + // const $nextEle = [...ele.parentNode.children].slice(1) + // ele.firstChild.classList.toggle('closed') + // if (btf.isHidden($nextEle[$nextEle.length - 1])) { + // $nextEle.forEach(e => { + // e.style.display = 'block' + // }) + // } else { + // $nextEle.forEach(e => { + // e.style.display = 'none' + // }) + // } + // } + // + // const highlightToolsFn = function (e) { + // const $target = e.target.classList + // if ($target.contains('expand')) highlightShrinkFn(this) + // else if ($target.contains('copy-button')) highlightCopyFn(this) + // } + // + // const expandCode = function () { + // this.classList.toggle('expand-done') + // } + // + // function createEle(lang, item, service) { + // const fragment = document.createDocumentFragment() + // + // if (isShowTool) { + // const hlTools = document.createElement('div') + // hlTools.className = `highlight-tools ${highlightShrinkClass}` + // hlTools.innerHTML = highlightShrinkEle + lang + highlightCopyEle + // hlTools.addEventListener('click', highlightToolsFn) + // fragment.appendChild(hlTools) + // } + // + // if (highlightHeightLimit && item.offsetHeight > highlightHeightLimit + 30) { + // const ele = document.createElement('div') + // ele.className = 'code-expand-btn' + // ele.innerHTML = '' + // ele.addEventListener('click', expandCode) + // fragment.appendChild(ele) + // } + // + // if (service === 'hl') { + // item.insertBefore(fragment, item.firstChild) + // } else { + // item.parentNode.insertBefore(fragment, item) + // } + // } + // + // if (isHighlightLang) { + // if (isPrismjs) { + // $figureHighlight.forEach(function (item) { + // const langName = item.getAttribute('data-language') ? item.getAttribute('data-language') : 'Code' + // const highlightLangEle = `
${langName}
` + // btf.wrap(item, 'figure', '', 'highlight') + // createEle(highlightLangEle, item) + // }) + // } else { + // $figureHighlight.forEach(function (item) { + // let langName = item.getAttribute('class').split(' ')[1] + // if (langName === 'plain' || langName === undefined) langName = 'Code' + // const highlightLangEle = `
${langName}
` + // createEle(highlightLangEle, item, 'hl') + // }) + // } + // } else { + // if (isPrismjs) { + // $figureHighlight.forEach(function (item) { + // btf.wrap(item, 'figure', '', 'highlight') + // createEle('', item) + // }) + // } else { + // $figureHighlight.forEach(function (item) { + // createEle('', item, 'hl') + // }) + // } + // } + // } + + /** + * PhotoFigcaption + */ + // function addPhotoFigcaption() { + // document.querySelectorAll('#article-container img').forEach(function (item) { + // const parentEle = item.parentNode + // if (!parentEle.parentNode.classList.contains('justified-gallery')) { + // const ele = document.createElement('div') + // ele.className = 'img-alt is-center' + // ele.textContent = item.getAttribute('alt') + // parentEle.insertBefore(ele, item.nextSibling) + // } + // }) + // } + + /** + * justified-gallery 圖庫排版 + * 需要 jQuery + */ + + // let detectJgJsLoad = false + // const runJustifiedGallery = function (ele) { + // const $justifiedGallery = $(ele) + // const $imgList = $justifiedGallery.find('img') + // $imgList.unwrap() + // if ($imgList.length) { + // $imgList.each(function (i, o) { + // if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src')) + // $(o).wrap('
') + // }) + // } + // + // if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery) + // else { + // $('head').append(``) + // $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () { + // btf.initJustifiedGallery($justifiedGallery) + // }) + // detectJgJsLoad = true + // } + // } + + /** + * fancybox和 mediumZoom + */ + // const addFancybox = function (ele) { + // const runFancybox = (ele) => { + // ele.each(function (i, o) { + // const $this = $(o) + // const lazyloadSrc = $this.attr('data-lazy-src') || $this.attr('src') + // const lazyloadSrc1600 = lazyloadSrc + '_1600w' + // const dataCaption = $this.attr('alt') || '' + // if (lazyloadSrc.indexOf('!blogimg') != -1) { + // $this.wrap(``) + // } else { + // $this.wrap(``) + // } + // + // }) + // + // $().fancybox({ + // selector: '[data-fancybox]', + // loop: true, + // transitionEffect: 'slide', + // protect: true, + // buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'], + // hash: false + // }) + // } + // + // if (typeof $.fancybox === 'undefined') { + // $('head').append(``) + // $.getScript(`${GLOBAL_CONFIG.source.fancybox.js}`, function () { + // runFancybox($(ele)) + // }) + // } else { + // runFancybox($(ele)) + // } + // } + + // const addMediumZoom = () => { + // const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img')) + // zoom.on('open', e => { + // const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff' + // zoom.update({ + // background: photoBg + // }) + // }) + // } + // + // const jqLoadAndRun = () => { + // const $fancyboxEle = GLOBAL_CONFIG.lightbox === 'fancybox' + // ? document.querySelectorAll('#article-container :not(a):not(.gallery-group) > img, #article-container > img,.bber-content-img > img') + // : [] + // const fbLengthNoZero = $fancyboxEle.length > 0 + // const $jgEle = document.querySelectorAll('#article-container .justified-gallery') + // const jgLengthNoZero = $jgEle.length > 0 + // + // if (jgLengthNoZero || fbLengthNoZero) { + // btf.isJqueryLoad(() => { + // jgLengthNoZero && runJustifiedGallery($jgEle) + // fbLengthNoZero && addFancybox($fancyboxEle) + // }) + // } + // } + + /** + * 滾動處理 + */ + const scrollFn = function () { + const $rightside = document.getElementById('rightside') + const innerHeight = window.innerHeight + 56 + + // 當滾動條小于 56 的時候 if (document.body.scrollHeight <= innerHeight) { + $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)' return } - // 滚动方向 + let initTop = 0 + let isChatShow = true + const $header = document.getElementById('page-header') + const $gulitop = document.getElementById('guli_top') + const $cookies_window = document.getElementById('cookies-window') + const isChatBtnHide = typeof chatBtnHide === 'function' + const isChatBtnShow = typeof chatBtnShow === 'function' + window.addEventListener('scroll', btf.throttle(function (e) { + const currentTop = window.scrollY || document.documentElement.scrollTop + const isDown = scrollDirection(currentTop) + if (currentTop > 56) { + if (isDown) { + if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible') + if (isChatBtnShow && isChatShow === true) { + chatBtnHide() + isChatShow = false + } + } else { + if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible') + if (isChatBtnHide && isChatShow === false) { + chatBtnShow() + isChatShow = true + } + } + $header.classList.add('nav-fixed') + $cookies_window.classList.add('cw-hide') + if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') { + $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)' + } + } else { + if (currentTop === 0) { + $header.classList.remove('nav-fixed', 'nav-visible') + } + $rightside.style.cssText = "opacity: ''; transform: ''" + } + + if (document.body.scrollHeight <= innerHeight) { + $rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)' + } + }, 200)) + + // find the scroll direction function scrollDirection(currentTop) { const result = currentTop > initTop // true is down & false is up initTop = currentTop return result } - - let initTop = 0; - let $header = document.getElementById("page-header"); - - window.scrollCollect = btf.throttle(function () { - - let currentTop = window.scrollY || document.documentElement.scrollTop; - let isDown = scrollDirection(currentTop); - - if (56 < currentTop) { - // 向下滚动 - if (isDown) { - // 隐藏 nav - if ($header.classList.contains("nav-visible")) { - $header.classList.remove("nav-visible"); - } - } else { - if (!$header.classList.contains("nav-visible")) { - $header.classList.add("nav-visible") - } - } - $header.classList.add("nav-fixed") - } else { - if (0 === currentTop) { - $header.classList.remove("nav-fixed", "nav-visible") - } - } - }, 200) - - window.addEventListener('scroll', scrollCollect) } - // 滚动处理 - const scrollFnToDo = function () { + /** + * toc + */ + const tocFn = function () { + const $cardTocLayout = document.getElementById('card-toc') + const $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0] + const $tocLink = $cardToc.querySelectorAll('.toc-link') + const $article = document.getElementById('article-container') - const isToc = GLOBAL_CONFIG.htmlType === 'post' && document.getElementById("card-toc"); - const $article = document.getElementById("article-container"); - - if (!($article && isToc)) return - - let $tocLink, $cardToc, scrollPercent, autoScrollToc, isExpand - - if (isToc) { - - const $cardTocLayout = document.getElementById("card-toc"); - $cardToc = $cardTocLayout.getElementsByClassName("toc-content")[0]; - $tocLink = $cardToc.querySelectorAll(".toc-link"); - - // const $tocPercentage = $cardTocLayout.querySelector(".toc-percentage"); - isExpand = $cardToc.classList.contains("is-expand"); - - scrollPercent = function (currentTop) { - const docHeight = $article.clientHeight; - const winHeight = document.documentElement.clientHeight; - const headerHeight = $article.offsetTop; - const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight); - const scrollPercent = (currentTop - headerHeight) / (contentMath); - const scrollPercentRounded = Math.round(scrollPercent * 100); - const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded; - // $tocPercentage.textContent = percentage - $cardToc.setAttribute("progress-percentage", percentage); - }; - - - window.mobileToc = { - open: () => { - $cardTocLayout.style.cssText = "animation: toc-open .3s; opacity: 1; right: 45px"; - }, - - close: () => { - $cardTocLayout.style.animation = "toc-close .2s" - setTimeout(function () { - $cardTocLayout.style.cssText = "opacity:''; animation: ''; right: ''"; - }, 100); - } - } - - // toc 元素点击 - $cardToc.addEventListener("click", e => { - e.preventDefault(); - const target = e.target.classList; - if (target.contains('toc-content')) return; - const $target = e.target.classList.contains("toc-link") ? e.target : e.target.parentElement; - - btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI($target.getAttribute("href")).replace("#", ""))), 300); - if (window.innerWidth < 900) { - window.mobileToc.close() - } - }); - - autoScrollToc = item => { - const activePosition = item.getBoundingClientRect().top - const sidebarScrollTop = $cardToc.scrollTop - if (activePosition > (document.documentElement.clientHeight - 100)) { - $cardToc.scrollTop = sidebarScrollTop + 150 - } - if (activePosition < 100) { - $cardToc.scrollTop = sidebarScrollTop - 150 - } - }; + // main of scroll + window.tocScrollFn = function () { + return btf.throttle(function () { + const currentTop = window.scrollY || document.documentElement.scrollTop + scrollPercent(currentTop) + findHeadPosition(currentTop) + }, 100)() } - // find head position & add active class - const list = $article.querySelectorAll("h1,h2,h3,h4,h5,h6"); - let detectItem = ""; - const findHeadPosition = function (top) { + window.addEventListener('scroll', tocScrollFn) - if (0 === $tocLink.length || 0 === top) { + const scrollPercent = function (currentTop) { + const docHeight = $article.clientHeight + const winHeight = document.documentElement.clientHeight + const headerHeight = $article.offsetTop + const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight) + const scrollPercent = (currentTop - headerHeight) / (contentMath) + const scrollPercentRounded = Math.round(scrollPercent * 100) + const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded + $cardToc.setAttribute('progress-percentage', percentage) + } + + // anchor + const isAnchor = GLOBAL_CONFIG.isanchor + const updateAnchor = function (anchor) { + if (window.history.replaceState && anchor !== window.location.hash) { + if (!anchor) anchor = location.pathname + const title = GLOBAL_CONFIG.postTitle + window.history.replaceState({ + url: location.href, + title: title + }, title, anchor) + } + } + + const mobileToc = { + open: () => { + $cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 45px' + }, + + close: () => { + $cardTocLayout.style.animation = 'toc-close .2s' + setTimeout(() => { + $cardTocLayout.style.cssText = "opacity:''; animation: ''; right: ''" + }, 100) + } + } + + document.getElementById('mobile-toc-button').addEventListener('click', () => { + if (window.getComputedStyle($cardTocLayout).getPropertyValue('opacity') === '0') mobileToc.open() + else mobileToc.close() + }) + + // toc元素點擊 + $cardToc.addEventListener('click', (e) => { + e.preventDefault() + const $target = e.target.classList.contains('toc-link') + ? e.target + : e.target.parentElement + btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI($target.getAttribute('href')).replace('#', ''))), 300) + if (window.innerWidth < 900) { + mobileToc.close() + } + }) + + const autoScrollToc = function (item) { + const activePosition = item.getBoundingClientRect().top + const sidebarScrollTop = $cardToc.scrollTop + if (activePosition > (document.documentElement.clientHeight - 100)) { + $cardToc.scrollTop = sidebarScrollTop + 150 + } + if (activePosition < 100) { + $cardToc.scrollTop = sidebarScrollTop - 150 + } + } + + // find head position & add active class + const list = $article.querySelectorAll('h1,h2,h3,h4,h5,h6') + let detectItem = '' + const findHeadPosition = function (top) { + if ($tocLink.length === 0 || top === 0) { return false } - let currentId = ""; - let currentIndex = ""; + let currentId = '' + let currentIndex = '' list.forEach(function (ele, index) { if (top > btf.getEleTop(ele) - 80) { - const id = ele.id - currentId = id ? "#" + encodeURI(id) : "" + currentId = '#' + encodeURI(ele.getAttribute('id')) currentIndex = index } - }) - if (detectItem === currentIndex) { + + if (detectItem === currentIndex) return + + if (isAnchor) updateAnchor(currentId) + + if (currentId === '') { + $cardToc.querySelectorAll('.active').forEach(i => { + i.classList.remove('active') + }) + detectItem = currentIndex return } detectItem = currentIndex - if (isToc) { - $cardToc.querySelectorAll(".active").forEach(i => { - i.classList.remove("active") - }); - if (currentId === "") { - return; - } + $cardToc.querySelectorAll('.active').forEach(item => { + item.classList.remove('active') + }) + const currentActive = $tocLink[currentIndex] + currentActive.classList.add('active') - const currentActive = $tocLink[currentIndex]; + setTimeout(() => { + autoScrollToc(currentActive) + }, 0) - currentActive.classList.add("active"); + let parent = currentActive.parentNode - setTimeout(() => { - autoScrollToc(currentActive) - }, 0); - - if (isExpand) return; - let parent = currentActive.parentNode; - - for (; !parent.matches(".toc-list"); parent = parent.parentNode) { - if (parent.matches("li")) parent.classList.add("active") - } + for (; !parent.matches('.toc'); parent = parent.parentNode) { + if (parent.matches('li')) parent.classList.add('active') } } - - window.tocScrollFn = function () { - return btf.throttle(function () { - let currentTop = window.scrollY || document.documentElement.scrollTop; - scrollPercent(currentTop) - findHeadPosition(currentTop); - }, 100)(); - }; - window.addEventListener("scroll", tocScrollFn); - }; - - const tabsFn = { - clickFnOfTabs() { - document - .querySelectorAll("#article-container .tab > button") - .forEach(function (item) { - item.addEventListener("click", function (t) { - const $tabItem = this.parentNode; - if (!$tabItem.classList.contains("active")) { - const $tabContent = $tabItem.parentNode.nextElementSibling - const $siblings = btf.siblings($tabItem, ".active")[0] - $siblings && $siblings.classList.remove("active") - $tabItem.classList.add("active") - const tabId = this.getAttribute("data-href").replace("#", "") - const childList = [...$tabContent.children] - childList.forEach(function (item) { - item.id === tabId ? item.classList.add("active") : item.classList.remove("active"); - }) - } - }) - }); - }, - backToTop() { - document.querySelectorAll("#article-container .tabs .tab-to-top") - .forEach(function (t) { - t.addEventListener("click", function () { - btf.scrollToDest(btf.getEleTop(btf.getParents(this, ".tabs")), 300); - }); - }); - } } + /** + * Rightside + */ + // const rightSideFn = { + // switchReadMode: () => { // read-mode + // const $body = document.body + // $body.classList.add('read-mode') + // const newEle = document.createElement('button') + // newEle.type = 'button' + // newEle.className = 'fas fa-sign-out-alt exit-readmode' + // $body.appendChild(newEle) + // + // function clickFn() { + // $body.classList.remove('read-mode') + // newEle.remove() + // newEle.removeEventListener('click', clickFn) + // } + // + // newEle.addEventListener('click', clickFn) + // }, + // switchDarkMode: () => { // Switch Between Light And Dark Mode + // const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' + // if (nowMode === 'light') { + // activateDarkMode() + // saveToLocal.set('theme', 'dark', 2); + // GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night, false, 2000); + // } else { + // activateLightMode(); + // saveToLocal.set('theme', 'light', 2); + // GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day, false, 2000); + // } + // // handle some cases + // typeof utterancesTheme === 'function' && utterancesTheme() + // typeof FB === 'object' && window.loadFBComment() + // window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200) + // }, + // showOrHideBtn: () => { // rightside 點擊設置 按鈕 展開 + // document.getElementById('rightside-config-hide').classList.toggle('show') + // }, + // scrollToTop: () => { // Back to top + // btf.scrollToDest(0, 500) + // }, + // hideAsideBtn: () => { // Hide aside + // const $htmlDom = document.documentElement.classList + // $htmlDom.contains('hide-aside') + // ? saveToLocal.set('aside-status', 'show', 2) + // : saveToLocal.set('aside-status', 'hide', 2) + // $htmlDom.toggle('hide-aside') + // }, + // + // adjustFontSize: (plus) => { + // const fontSizeVal = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--global-font-size')) + // let newValue = '' + // if (plus) { + // if (fontSizeVal >= 20) return + // newValue = fontSizeVal + 1 + // document.documentElement.style.setProperty('--global-font-size', newValue + 'px') + // !document.getElementById('nav').classList.contains('hide-menu') && adjustMenu(true) + // } else { + // if (fontSizeVal <= 10) return + // newValue = fontSizeVal - 1 + // document.documentElement.style.setProperty('--global-font-size', newValue + 'px') + // document.getElementById('nav').classList.contains('hide-menu') && adjustMenu(true) + // } + // + // saveToLocal.set('global-font-size', newValue, 2) + // // document.getElementById('font-text').innerText = newValue + // } + // } + + // document.getElementById('rightside').addEventListener('click', function (e) { + // const $target = e.target.id || e.target.parentNode.id + // switch ($target) { + // case 'go-up': + // rightSideFn.scrollToTop() + // break + // case 'rightside_config': + // rightSideFn.showOrHideBtn() + // break + // case 'readmode': + // rightSideFn.switchReadMode() + // break + // case 'darkmode': + // rightSideFn.switchDarkMode() + // break + // case 'hide-aside-btn': + // rightSideFn.hideAsideBtn() + // break + // case 'font-plus': + // rightSideFn.adjustFontSize(true) + // break + // case 'font-minus': + // rightSideFn.adjustFontSize() + // break + // default: + // break + // } + // }) + + /** + * menu + * 側邊欄sub-menu 展開/收縮 + * 解決menus在觸摸屏下，滑動屏幕menus_item_child不消失的問題（手機hover的bug) + */ + const clickFnOfSubMenu = function () { + document.querySelectorAll('#sidebar-menus .expand').forEach(function (e) { + e.addEventListener('click', function () { + this.classList.toggle('hide') + const $dom = this.parentNode.nextElementSibling + if (btf.isHidden($dom)) { + $dom.style.display = 'block' + } else { + $dom.style.display = 'none' + } + }) + }) + + window.addEventListener('touchmove', function (e) { + const $menusChild = document.querySelectorAll('#nav .menus_item_child') + $menusChild.forEach(item => { + if (!btf.isHidden(item)) item.style.display = 'none' + }) + }) + } + + /** + * 複製時加上版權信息 + */ + const addCopyright = () => { + const copyright = GLOBAL_CONFIG.copyright + document.body.oncopy = (e) => { + e.preventDefault() + let textFont; + const copyFont = window.getSelection(0).toString() + if (copyFont.length > copyright.limitCount) { + textFont = copyFont + '\n' + '\n' + '\n' + + copyright.languages.author + '\n' + + copyright.languages.link + window.location.href + '\n' + + copyright.languages.source + '\n' + + copyright.languages.info + } else { + textFont = copyFont + } + if (e.clipboardData) { + return e.clipboardData.setData('text', textFont) + } else { + return window.clipboardData.setData('text', textFont) + } + } + } + + /** + * 網頁運行時間 + */ + const addRuntime = () => { + const $runtimeCount = document.getElementById('runtimeshow') + if ($runtimeCount) { + const publishDate = $runtimeCount.getAttribute('data-publishDate') + $runtimeCount.innerText = btf.diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime + } + } + + /** + * 最後一次更新時間 + */ + const addLastPushDate = () => { + const $lastPushDateItem = document.getElementById('last-push-date') + if ($lastPushDateItem) { + const lastPushDate = $lastPushDateItem.getAttribute('data-lastPushDate') + $lastPushDateItem.innerText = btf.diffDate(lastPushDate, true) + } + } + + /** + * table overflow + */ + const addTableWrap = function () { + const $table = document.querySelectorAll('#article-container :not(.highlight) > table, #article-container > table') + if ($table.length) { + $table.forEach(item => { + btf.wrap(item, 'div', '', 'table-wrap') + }) + } + } + + /** + * tag-hide + */ + const clickFnOfTagHide = function () { + const $hideInline = document.querySelectorAll('#article-container .hide-button') + if ($hideInline.length) { + $hideInline.forEach(function (item) { + item.addEventListener('click', function (e) { + const $this = this + const $hideContent = $this.nextElementSibling + $this.classList.toggle('open') + if ($this.classList.contains('open')) { + if ($hideContent.querySelectorAll('.justified-gallery').length > 0) { + btf.initJustifiedGallery($hideContent.querySelectorAll('.justified-gallery')) + } + } + }) + }) + } + } + + const tabsFn = { + clickFnOfTabs: function () { + document.querySelectorAll('#article-container .tab > button').forEach(function (item) { + item.addEventListener('click', function (e) { + const $this = this + const $tabItem = $this.parentNode + + if (!$tabItem.classList.contains('active')) { + const $tabContent = $tabItem.parentNode.nextElementSibling + const $siblings = btf.siblings($tabItem, '.active')[0] + $siblings && $siblings.classList.remove('active') + $tabItem.classList.add('active') + const tabId = $this.getAttribute('data-href').replace('#', '') + const childList = [...$tabContent.children] + childList.forEach(item => { + if (item.id === tabId) item.classList.add('active') + else item.classList.remove('active') + }) + const $isTabJustifiedGallery = $tabContent.querySelectorAll(`#${tabId} .justified-gallery`) + if ($isTabJustifiedGallery.length > 0) { + btf.initJustifiedGallery($isTabJustifiedGallery) + } + } + }) + }) + }, + backToTop: () => { + document.querySelectorAll('#article-container .tabs .tab-to-top').forEach(function (item) { + item.addEventListener('click', function () { + btf.scrollToDest(btf.getEleTop(btf.getParents(this, '.tabs')), 300) + }) + }) + } + } + + const toggleCardCategory = function () { + const $cardCategory = document.querySelectorAll('#aside-cat-list .card-category-list-item.parent i') + if ($cardCategory.length) { + $cardCategory.forEach(function (item) { + item.addEventListener('click', function (e) { + e.preventDefault() + const $this = this + $this.classList.toggle('expand') + const $parentEle = $this.parentNode.nextElementSibling + if (btf.isHidden($parentEle)) { + $parentEle.style.display = 'block' + } else { + $parentEle.style.display = 'none' + } + }) + }) + } + } + + // const switchComments = function () { + // let switchDone = false + // const $switchBtn = document.querySelector('#comment-switch > .switch-btn') + // $switchBtn && $switchBtn.addEventListener('click', function () { + // this.classList.toggle('move') + // document.querySelectorAll('#post-comment > .comment-wrap > div').forEach(function (item) { + // if (btf.isHidden(item)) { + // item.style.cssText = 'display: block;animation: tabshow .5s' + // } else { + // item.style.cssText = "display: none;animation: ''" + // } + // }) + // + // if (!switchDone && typeof loadOtherComment === 'function') { + // switchDone = true + // loadOtherComment() + // } + // }) + // } + + const addPostOutdateNotice = function () { + const data = GLOBAL_CONFIG.noticeOutdate + const diffDay = btf.diffDate(GLOBAL_CONFIG_SITE.postUpdate) + if (diffDay >= data.limitDay) { + const ele = document.createElement('div') + ele.className = 'post-outdate-notice' + ele.textContent = data.messagePrev + ' ' + diffDay + ' ' + data.messageNext + const $targetEle = document.getElementById('article-container') + if (data.position === 'top') { + $targetEle.insertBefore(ele, $targetEle.firstChild) + } else { + $targetEle.appendChild(ele) + } + } + } + + const lazyloadImg = () => { + window.lazyLoadInstance = new LazyLoad({ + elements_selector: 'img', + threshold: 0, + data_src: 'lazy-src' + }) + } + + const relativeDate = function (selector) { + selector.forEach(item => { + const $this = item + const timeVal = $this.getAttribute('datetime') + $this.innerText = btf.diffDate(timeVal, true) + $this.style.display = 'inline' + }) + } + + const unRefreshFn = function () { + window.addEventListener('resize', adjustMenu) + window.addEventListener('orientationchange', () => { + setTimeout(adjustMenu(true), 100) + }) + + clickFnOfSubMenu() + GLOBAL_CONFIG.islazyload && lazyloadImg() + GLOBAL_CONFIG.copyright !== undefined && addCopyright() + } window.refreshFn = function () { + initAdjust() - initAdjust(); + if (GLOBAL_CONFIG.isPost) { + GLOBAL_CONFIG.isToc && tocFn() + // GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice() + // GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time')) + } else { + // GLOBAL_CONFIG.relativeDate.homepage && relativeDate(document.querySelectorAll('#recent-posts time')) + // GLOBAL_CONFIG.runtime && addRuntime() + addLastPushDate() + toggleCardCategory() + } - scrollFnToDo(); - scrollFn(); - tabsFn.clickFnOfTabs(); - tabsFn.backToTop(); + sidebarFn() + GLOBAL_CONFIG.isHome && scrollDownInIndex() + // addHighlightTool() + // GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption() + // jqLoadAndRun() + // GLOBAL_CONFIG.lightbox === 'mediumZoom' && addMediumZoom() + scrollFn() + addTableWrap() + clickFnOfTagHide() + tabsFn.clickFnOfTabs() + tabsFn.backToTop() + // switchComments() } refreshFn() - window.addEventListener("touchmove", function (t) { - document.querySelectorAll("#nav .menus_item_child").forEach(function (t) { - btf.isHidden(t) || (t.style.display = "none"); - }); - }) -}); + unRefreshFn() +}) diff --git a/templates/assets/js/utils.js b/templates/assets/js/utils.js index d3f6b701..20fc7e51 100644 --- a/templates/assets/js/utils.js +++ b/templates/assets/js/utils.js @@ -1,6 +1,4 @@ -"use strict"; - -const btf = { +var btf = { debounce: function (func, wait, immediate) { let timeout return function () { @@ -60,40 +58,99 @@ const btf = { } }, - snackbarShow: (text, showAction = false, duration = 2000) => { - const { position, bgLight, bgDark } = GLOBAL_CONFIG.Snackbar - const bg = document.documentElement.getAttribute('data-theme') === 'light' ? bgLight : bgDark + snackbarShow: (text, showAction, duration) => { + const sa = (typeof showAction !== 'undefined') ? showAction : false + const dur = (typeof duration !== 'undefined') ? duration : 5000 + const position = GLOBAL_CONFIG.Snackbar.position + const bg = document.documentElement.getAttribute('data-theme') === 'light' ? GLOBAL_CONFIG.Snackbar.bgLight : GLOBAL_CONFIG.Snackbar.bgDark + document.styleSheets[0].addRule(':root', '--heo-snackbar-time:' + dur + 'ms!important') Snackbar.show({ text: text, backgroundColor: bg, - showAction: showAction, - duration: duration, - pos: position, - customClass: 'snackbar-css' + showAction: sa, + duration: dur, + pos: position + }) + + }, + + initJustifiedGallery: function (selector) { + if (!(selector instanceof jQuery)) { + selector = $(selector) + } + selector.each(function (i, o) { + if ($(this).is(':visible')) { + $(this).justifiedGallery({ + rowHeight: 220, + margins: 4 + }) + } }) }, - // 图库排版 - // initJustifiedGallery: function (selector) { - // selector.forEach(function (i) { - // if (!btf.isHidden(i)) { - // fjGallery(i, { - // itemSelector: '.fj-gallery-item', - // rowHeight: 220, - // gutter: 4, - // onJustify: function () { - // this.$container.style.opacity = '1' - // } - // }) - // } - // }) - // }, + diffDate: (d, more = false) => { + const dateNow = new Date() + const datePost = new Date(d) + const dateDiff = dateNow.getTime() - datePost.getTime() + const minute = 1000 * 60 + const hour = minute * 60 + const day = hour * 24 + const month = day * 30 - scrollToDest: (pos, time = 500) => { - const currentPos = window.pageYOffset - if (currentPos > pos) pos = pos - 70 + let result + if (more) { + const monthCount = dateDiff / month + const dayCount = dateDiff / day + const hourCount = dateDiff / hour + const minuteCount = dateDiff / minute - if ('scrollBehavior' in document.documentElement.style) { + if (monthCount > 12) { + // result = datePost.toLocaleDateString().replace(/\//g, '-') + result = datePost.toLocaleDateString() + } else if (dayCount >= 7) { + // } else if (monthCount >= 1) { + result = datePost.toLocaleDateString().substr(5) + // result = parseInt(monthCount) + ' ' + GLOBAL_CONFIG.date_suffix.month + } else if (dayCount >= 1) { + result = parseInt(dayCount) + '' + GLOBAL_CONFIG.date_suffix.day + } else if (hourCount >= 1) { + result = '最近' + // result = parseInt(hourCount) + ' ' + GLOBAL_CONFIG.date_suffix.hour + } else if (minuteCount >= 1) { + result = '最近' + // result = parseInt(minuteCount) + ' ' + GLOBAL_CONFIG.date_suffix.min + } else { + result = GLOBAL_CONFIG.date_suffix.just + } + } else { + result = parseInt(dateDiff / day) + } + return result + }, + + loadComment: (dom, callback) => { + if ('IntersectionObserver' in window) { + const observerItem = new IntersectionObserver((entries) => { + if (entries[0].isIntersecting) { + callback() + observerItem.disconnect() + } + }, {threshold: [0]}) + observerItem.observe(dom) + } else { + callback() + } + }, + + scrollToDest: (pos, time) => { + if (pos < 0 || time < 0) { + return + } + + const currentPos = window.scrollY || window.screenTop + pos = pos - 70 + + if ('CSS' in window && CSS.supports('scroll-behavior', 'smooth')) { window.scrollTo({ top: pos, behavior: 'smooth' @@ -102,31 +159,39 @@ const btf = { } let start = null - pos = +pos - window.requestAnimationFrame(function step (currentTime) { + time = time || 500 + window.requestAnimationFrame(function step(currentTime) { start = !start ? currentTime : start - const progress = currentTime - start if (currentPos < pos) { + const progress = currentTime - start window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos) + if (progress < time) { + window.requestAnimationFrame(step) + } else { + window.scrollTo(0, pos) + } } else { + const progress = currentTime - start window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time)) - } - if (progress < time) { - window.requestAnimationFrame(step) - } else { - window.scrollTo(0, pos) + if (progress < time) { + window.requestAnimationFrame(step) + } else { + window.scrollTo(0, pos) + } } }) }, - fadeIn: function (e, t) { - e.style.cssText = "display:block;animation: to_show ".concat(t, "s") + fadeIn: (ele, time) => { + ele.style.cssText = `display:block;animation: to_show ${time}s` }, - fadeOut: function (t, e) { - t.addEventListener("animationend", function e() { - t.style.cssText = "display: none; animation: '' ", t.removeEventListener("animationend", e) - }), t.style.animation = "to_hide ".concat(e, "s") + fadeOut: (ele, time) => { + ele.addEventListener('animationend', function f() { + ele.style.cssText = "display: none; animation: '' " + ele.removeEventListener('animationend', f) + }) + ele.style.animation = `to_hide ${time}s` }, getParents: (elem, selector) => { @@ -146,20 +211,21 @@ const btf = { }, /** + * * @param {*} selector * @param {*} eleType the type of create element - * @param {*} options object key: value + * @param {*} id id + * @param {*} cn class name */ - wrap: (selector, eleType, options) => { + wrap: function (selector, eleType, id = '', cn = '') { const creatEle = document.createElement(eleType) - for (const [key, value] of Object.entries(options)) { - creatEle.setAttribute(key, value) - } + if (id) creatEle.id = id + if (cn) creatEle.className = cn selector.parentNode.insertBefore(creatEle, selector) creatEle.appendChild(selector) }, - unwrap: el => { + unwrap: function (el) { const elParentNode = el.parentNode if (elParentNode !== document.body) { elParentNode.parentNode.insertBefore(el, elParentNode) @@ -167,9 +233,17 @@ const btf = { } }, - isHidden: ele => ele.offsetHeight === 0 && ele.offsetWidth === 0, + isJqueryLoad: (fn) => { + if (typeof jQuery === 'undefined') { + getScript(GLOBAL_CONFIG.source.jQuery).then(fn) + } else { + fn() + } + }, - getEleTop: ele => { + isHidden: (ele) => ele.offsetHeight === 0 && ele.offsetWidth === 0, + + getEleTop: (ele) => { let actualTop = ele.offsetTop let current = ele.offsetParent @@ -179,6 +253,6 @@ const btf = { } return actualTop - }, + } -}; \ No newline at end of file +} diff --git a/templates/assets/zhheo/blogex.js b/templates/assets/zhheo/blogex.js index a098ed33..1799da5c 100644 --- a/templates/assets/zhheo/blogex.js +++ b/templates/assets/zhheo/blogex.js @@ -1,331 +1,780 @@ -"use strict"; +// var full_page = document.getElementsByClassName("full_page"); +// if (full_page.length != 0) { +// full_page[0].style.background = "transparent"; +// } -function _createForOfIteratorHelper(e, t) { - var o = "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"]; - if (!o) { - if (Array.isArray(e) || (o = _unsupportedIterableToArray(e)) || t && e && "number" == typeof e.length) { - o && (e = o); - var n = 0, r = function () { - }; - return { - s: r, n: function () { - return n >= e.length ? {done: !0} : {done: !1, value: e[n++]} - }, e: function (e) { - throw e - }, f: r - } - } - throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.") - } - var a, i = !0, c = !1; - return { - s: function () { - o = o.call(e) - }, n: function () { - var e = o.next(); - return i = e.done, e - }, e: function (e) { - c = !0, a = e - }, f: function () { - try { - i || null == o.return || o.return() - } finally { - if (c) throw a - } - } - } -} - -function _unsupportedIterableToArray(e, t) { - if (e) { - if ("string" == typeof e) return _arrayLikeToArray(e, t); - var o = Object.prototype.toString.call(e).slice(8, -1); - return "Object" === o && e.constructor && (o = e.constructor.name), "Map" === o || "Set" === o ? Array.from(e) : "Arguments" === o || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o) ? _arrayLikeToArray(e, t) : void 0 - } -} - -function _arrayLikeToArray(e, t) { - (null == t || t > e.length) && (t = e.length); - for (var o = 0, n = new Array(t); o < t; o++) n[o] = e[o]; - return n -} - -function _typeof(e) { - return (_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) { - return typeof e - } : function (e) { - return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e - })(e) -} function checkOpen() { } -// https://blog.zhheo.com/p/c86d8f1f.html -// ?imageAve 使用 七牛云获取图片主色调，阿里云 oss 则是 @imageAve -// 效果比较低微，这块应该添加配置项 -// 用户选择是否开启主色调背景 -// 然后选择是使用图床的 API 获取主色还是选择使用 js 获取 -// https://lokeshdhakar.com/projects/color-thief/ +checkOpen.toString = function () { + this.opened = true; +}; + +//封面纯色 function coverColor() { + var path = document.getElementById("post-cover")?.src; + // console.log(path); + if (path !== undefined) { + var httpRequest = new XMLHttpRequest(); //第一步：建立所需的对象 + httpRequest.open('GET', path + '?imageAve', true); //第二步：打开连接 将请求参数写在url中 ps:"./Ptest.php?name=test&nameone=testone" + httpRequest.send(); //第三步：发送请求 将请求参数写在URL中 + /** + * 获取数据后的处理程序 + */ + httpRequest.onreadystatechange = function () { + if (httpRequest.readyState == 4 && httpRequest.status == 200) { + var json = httpRequest.responseText; //获取到json字符串，还需解析 + var obj = eval('(' + json + ')'); + var value = obj.RGB; + value = "#" + value.slice(2) + // console.log(value); + // document.getElementById('page-header').style.backgroundColor=value; + // document.styleSheets[0].addRule('#page-header:before','background: '+ value +'!important'); - let img = document.getElementById("post-cover"); - let path = img.src; - if (void 0 !== path) { - - const fac = new FastAverageColor(); - - fac.getColorAsync(path) - .then(color => { - console.log('Average color', color); - loadColor(color); - }) - .catch(e => { - console.log(e); - defaultColor(); - }); - - // const colorThief = new ColorThief(); - - // Make sure image is finished loading - // if (img.complete) { - // loadColor(colorThief.getColor(img)); - // } else { - // img.addEventListener('load', function () { - // loadColor(colorThief.getColor(img)); - // }); - // } - + if (getContrastYIQ(value) == "light") { + value = LightenDarkenColor(colorHex(value), -40) + } + document.styleSheets[0].addRule(':root', '--heo-main:' + value + '!important'); + document.styleSheets[0].addRule(':root', '--heo-main-op:' + value + '23!important'); + document.styleSheets[0].addRule(':root', '--heo-main-op-deep:' + value + 'dd!important'); + document.styleSheets[0].addRule(':root', '--heo-main-none:' + value + '00!important'); + heo.initThemeColor() + document.getElementById("coverdiv").classList.add("loaded"); + } + }; } else { - defaultColor(); + // document.styleSheets[0].addRule('#page-header:before','background: none!important'); + document.styleSheets[0].addRule(':root', '--heo-main: var(--heo-theme)!important'); + document.styleSheets[0].addRule(':root', '--heo-main-op: var(--heo-theme-op)!important'); + document.styleSheets[0].addRule(':root', '--heo-main-op-deep:var(--heo-theme-op-deep)!important'); + document.styleSheets[0].addRule(':root', '--heo-main-none: var(--heo-theme-none)!important'); + heo.initThemeColor() } } -function defaultColor() { - document.styleSheets[0].addRule(":root", "--heo-main: var(--heo-theme)!important"); - document.styleSheets[0].addRule(":root", "--heo-main-op: var(--heo-theme-op)!important"); - document.styleSheets[0].addRule(":root", "--heo-main-none: var(--heo-theme-none)!important"); +//RGB颜色转化为16进制颜色 +function colorHex(str) { + var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; + var that = str; + if (/^(rgb|RGB)/.test(that)) { + var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(","); + var strHex = "#"; + for (var i = 0; i < aColor.length; i++) { + var hex = Number(aColor[i]).toString(16); + if (hex === "0") { + hex += hex; + } + strHex += hex; + } + if (strHex.length !== 7) { + strHex = that; + } + return strHex; + } else if (reg.test(that)) { + var aNum = that.replace(/#/, "").split(""); + if (aNum.length === 6) { + return that; + } else if (aNum.length === 3) { + var numHex = "#"; + for (var i = 0; i < aNum.length; i += 1) { + numHex += (aNum[i] + aNum[i]); + } + return numHex; + } + } else { + return that; + } +} + +//16进制颜色转化为RGB颜色 +function colorRgb(str) { + var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; + var sColor = str.toLowerCase(); + if (sColor && reg.test(sColor)) { + if (sColor.length === 4) { + var sColorNew = "#"; + for (var i = 1; i < 4; i += 1) { + sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1)); + } + sColor = sColorNew; + } + //处理六位的颜色值 + var sColorChange = []; + for (var i = 1; i < 7; i += 2) { + sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2))); + } + return "rgb(" + sColorChange.join(",") + ")"; + } else { + return sColor; + } +} + +//变暗变亮主方法 +function LightenDarkenColor(col, amt) { + var usePound = false; + + if (col[0] == "#") { + col = col.slice(1); + usePound = true; + } + + var num = parseInt(col, 16); + + var r = (num >> 16) + amt; + + if (r > 255) r = 255; + else if (r < 0) r = 0; + + var b = ((num >> 8) & 0x00FF) + amt; + + if (b > 255) b = 255; + else if (b < 0) b = 0; + + var g = (num & 0x0000FF) + amt; + + if (g > 255) g = 255; + else if (g < 0) g = 0; + + + return (usePound ? "#" : "") + String("000000" + (g | (b << 8) | (r << 16)).toString(16)).slice(-6); +} + +//判断是否为亮色 +function getContrastYIQ(hexcolor) { + var colorrgb = colorRgb(hexcolor); + var colors = colorrgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); + var red = colors[1]; + var green = colors[2]; + var blue = colors[3]; + var brightness; + brightness = (red * 299) + (green * 587) + (blue * 114); + brightness = brightness / 255000; + if (brightness >= 0.5) { + return "light"; + } else { + return "dark"; + } +} + +//导航栏文章 +function navTitle() { + var titlevalue = document.title; + var simptitle = titlevalue.replace(' | 张洪Heo', '') + document.getElementById("page-name-text").innerHTML = simptitle; +} + +window.onload = function () { + var copybtnlist = document.getElementsByClassName("copybtn") + for (var i = 0; i < copybtnlist.length; i++) { + document.getElementsByClassName("copybtn")[i].addEventListener("click", function () { + showcopy(); + }); + } heo.initThemeColor(); } -function loadColor(color) { - - let hexColor = color.hex; - - if ("light" === getContrastYIQ(hexColor)) { - hexColor = LightenDarkenColor(colorHex(hexColor), -40); - document.styleSheets[0].addRule(":root", "--heo-main:" + hexColor + "!important"); - document.styleSheets[0].addRule(":root", "--heo-main-op:" + hexColor + "23!important"); - document.styleSheets[0].addRule(":root", "--heo-main-none:" + hexColor + "00!important"); - heo.initThemeColor(); - document.getElementById("coverdiv").classList.add("loaded"); - } - -} - - -function rgbToHex(r, g, b) { - return '#' + [r, g, b].map(x => { - const hex = x.toString(16) - return hex.length === 1 ? '0' + hex : hex - }).join(''); -} - - -function colorHex(e) { - var t = e; - if (/^(rgb|RGB)/.test(t)) { - for (var o = t.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(","), n = "#", r = 0; r < o.length; r++) { - var a = Number(o[r]).toString(16); - "0" === a && (a += a), n += a - } - return 7 !== n.length && (n = t), n - } - if (!/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(t)) return t; - var i = t.replace(/#/, "").split(""); - if (6 === i.length) return t; - if (3 === i.length) { - for (var c = "#", r = 0; r < i.length; r += 1) c += i[r] + i[r]; - return c +function showcopy() { + if (GLOBAL_CONFIG.Snackbar !== undefined) { + btf.snackbarShow(GLOBAL_CONFIG.copy.success) + } else { + const prevEle = ctx.previousElementSibling + prevEle.innerText = GLOBAL_CONFIG.copy.success + prevEle.style.opacity = 1 + setTimeout(() => { + prevEle.style.opacity = 0 + }, 700) } } -function colorRgb(e) { - var t = e.toLowerCase(); - if (t && /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(t)) { - if (4 === t.length) { - for (var o = "#", n = 1; n < 4; n += 1) o += t.slice(n, n + 1).concat(t.slice(n, n + 1)); - t = o - } - for (var r = [], n = 1; n < 7; n += 2) r.push(parseInt("0x" + t.slice(n, n + 2))); - return "rgb(" + r.join(",") + ")" +//导航栏上显示标题 +// var OriginTitile = document.title; +// var titleTime; +// document.addEventListener('visibilitychange', function () { +// if (document.hidden) { +// // $('[rel="shortcut icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/img/siteicon/favicon.png"); +// document.title = '张洪Heo'; +// clearTimeout(titleTime); +// } +// else { +// // $('[rel="shortcut icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Akilarlxh/Akilarlxh.github.io@v3.3.3_3/img/siteicon/favicon.png"); +// document.title = OriginTitile; +// // titleTime = setTimeout(function () { +// // document.title = OriginTitile; +// // }, 2000); +// } +// }); + +// 早上好问好 +// 获取时间 +var getTimeState = () => { + // 获取当前时间 + var timeNow = new Date(); + // 获取当前小时 + var hours = timeNow.getHours(); + // 设置默认文字 + var text = ``; + // 判断当前时间段 + if (hours >= 0 && hours <= 5) { + text = `晚安`; + } else if (hours > 5 && hours <= 10) { + text = `早上好`; + } else if (hours > 10 && hours <= 14) { + text = `中午好`; + } else if (hours > 14 && hours <= 18) { + text = `下午好`; + } else if (hours > 18 && hours <= 24) { + text = `晚上好`; } - return t -} - -function LightenDarkenColor(e, t) { - var o = !1; - "#" == e[0] && (e = e.slice(1), o = !0); - var n = parseInt(e, 16), r = (n >> 16) + t; - 255 < r ? r = 255 : r < 0 && (r = 0); - var a = (n >> 8 & 255) + t; - 255 < a ? a = 255 : a < 0 && (a = 0); - var i = (255 & n) + t; - return 255 < i ? i = 255 : i < 0 && (i = 0), (o ? "#" : "") + String("000000" + (i | a << 8 | r << 16).toString(16)).slice(-6) -} - -function getContrastYIQ(e) { - var t = colorRgb(e).match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/), o = 299 * t[1] + 587 * t[2] + 114 * t[3]; - return .5 <= (o /= 255e3) ? "light" : "dark" -} - -function navTitle() { - var e = document.title.replace(" | halo", ""); - document.getElementById("page-name-text").innerHTML = e -} - -checkOpen.toString = function () { - this.opened = !0 -}, window.onload = function () { - for (var e = document.getElementsByClassName("copybtn"), t = 0; t < e.length; t++) document.getElementsByClassName("copybtn")[t].addEventListener("click", function () { - showcopy() - }); - heo.initThemeColor() -}; - -var getTimeState = function () { - var e = (new Date).getHours(), t = ""; - return 0 <= e && e <= 5 ? t = "晚安" : 5 < e && e <= 10 ? t = "早上好" : 10 < e && e <= 14 ? t = "中午好" : 14 < e && e <= 18 ? t = "下午好" : 18 < e && e <= 24 && (t = "晚上好"), t + //    console.log(`hours >>>>>`, hours); + //    console.log(`text >>>>`, text); + // 返回当前时间段对应的状态 + return text; }; function fly_to_top() { - document.getElementById("guli_top").classList.add("open_wing"), setTimeout(function () { - document.getElementById("guli_top").classList.add("flying"), btf.scrollToDest(0, 300) - }, 300), setTimeout(function () { - document.getElementById("guli_top").classList.remove("flying"), document.getElementById("guli_top").classList.remove("open_wing"), document.getElementById("guli_top").style.cssText = "opacity: ''; transform: ''" + document.getElementById("guli_top").classList.add("open_wing"); + setTimeout(function () { + document.getElementById("guli_top").classList.add("flying"); + btf.scrollToDest(0, 300); + }, 300); + setTimeout(function () { + // 这里就是处理的事件 + document.getElementById("guli_top").classList.remove("flying"); + document.getElementById("guli_top").classList.remove("open_wing"); + document.getElementById("guli_top").style.cssText = "opacity: ''; transform: ''"; }, 600) } +//深色模式切换 var navFn = { - switchDarkMode: function () { - "light" == ("dark" === document.documentElement.getAttribute("data-theme") ? "dark" : "light") ? (activateDarkMode(), saveToLocal.set("theme", "dark", 2), void 0 !== GLOBAL_CONFIG.Snackbar && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night, !1, 2e3)) : (activateLightMode(), saveToLocal.set("theme", "light", 2), void 0 !== GLOBAL_CONFIG.Snackbar && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day, !1, 2e3)), "function" == typeof utterancesTheme && utterancesTheme(), "object" === ("undefined" == typeof FB ? "undefined" : _typeof(FB)) && window.loadFBComment(), window.DISQUS && document.getElementById("disqus_thread").children.length && setTimeout(function () { - return window.disqusReset() - }, 200); - var e, t, o, n = "light" === document.documentElement.getAttribute("data-theme") ? "#363636" : "#F7F7FA"; - document.getElementById("posts-chart") && ((e = postsOption).textStyle.color = n, e.title.textStyle.color = n, e.xAxis.axisLine.lineStyle.color = n, e.yAxis.axisLine.lineStyle.color = n, postsChart.setOption(e)), document.getElementById("tags-chart") && ((t = tagsOption).textStyle.color = n, t.title.textStyle.color = n, t.xAxis.axisLine.lineStyle.color = n, t.yAxis.axisLine.lineStyle.color = n, tagsChart.setOption(t)), document.getElementById("categories-chart") && ((o = categoriesOption).textStyle.color = n, o.title.textStyle.color = n, o.legend.textStyle.color = n, categoriesChart.setOption(o)) - } -}; + switchDarkMode: () => { // Switch Between Light And Dark Mode + const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light' + if (nowMode === 'light') { + activateDarkMode() + saveToLocal.set('theme', 'dark', 2) + GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night, false, 2000) + } else { + activateLightMode() + saveToLocal.set('theme', 'light', 2) + GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day, false, 2000) + } + // handle some cases + typeof utterancesTheme === 'function' && utterancesTheme(); + typeof FB === 'object' && window.loadFBComment(); + window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200) + //统计图 + let color = document.documentElement.getAttribute('data-theme') === 'light' ? '#363636' : '#F7F7FA' + if (document.getElementById('posts-chart')) { + let postsOptionNew = postsOption + postsOptionNew.textStyle.color = color + postsOptionNew.title.textStyle.color = color + postsOptionNew.xAxis.axisLine.lineStyle.color = color + postsOptionNew.yAxis.axisLine.lineStyle.color = color + postsChart.setOption(postsOptionNew) + } + if (document.getElementById('tags-chart')) { + let tagsOptionNew = tagsOption + tagsOptionNew.textStyle.color = color + tagsOptionNew.title.textStyle.color = color + tagsOptionNew.xAxis.axisLine.lineStyle.color = color + tagsOptionNew.yAxis.axisLine.lineStyle.color = color + tagsChart.setOption(tagsOptionNew) + } + if (document.getElementById('categories-chart')) { + let categoriesOptionNew = categoriesOption + categoriesOptionNew.textStyle.color = color + categoriesOptionNew.title.textStyle.color = color + categoriesOptionNew.legend.textStyle.color = color + categoriesChart.setOption(categoriesOptionNew) + } + } +} + +// 移除赞赏蒙版 function RemoveRewardMask() { - $(".reward-main").attr("style", "display: none"), $("#quit-box").attr("style", "display: none") + $('.reward-main').attr('style', 'display: none'); + $('#quit-box').attr('style', 'display: none'); +} + +//添加赞赏蒙版 +function AddRewardMask() { + $('.reward-main').attr('style', 'display: flex'); +} + +//监听蒙版关闭 +document.addEventListener('touchstart', e => { + RemoveRewardMask() +}, false) + +//监听ctrl+C +$(document).unbind('keydown').bind('keydown', function (e) { + if ((e.ctrlKey || e.metaKey) && (e.keyCode == 67) && (selectTextNow != '')) { + btf.snackbarShow('复制成功，复制和转载请标注本文地址'); + rm.rightmenuCopyText(selectTextNow); + return false; + } +}) + +//判断国内国外 +// var foreignTips = (function () { +// var fetchUrl = "https://api.ooomn.com/api/ip" +// fetch(fetchUrl) +// .then(res => res.json()) +// .then(json =>{ +// var country = json.country; +// console.log(country); +// if (country != '中国'){ +// btf.snackbarShow('使用国外网络访问可能无法访问文章图片，敬请谅解。Blog pictures only serve mainland China.') +// } +// }) +// }); + +//颜色 +document.addEventListener('scroll', btf.throttle(function () { + heo.initThemeColor() +}, 200)) + +//友链随机传送 +function travelling() { + var fetchUrl = "https://moments.zhheo.com/randomfriend" + fetch(fetchUrl) + .then(res => res.json()) + .then(json => { + var name = json.name; + var link = json.link; + var msg = "点击前往按钮进入随机一个友链，不保证跳转网站的安全性和可用性。本次随机到的是本站友链：「" + name + "」"; + document.styleSheets[0].addRule(':root', '--heo-snackbar-time:' + 8000 + 'ms!important'); + Snackbar.show({ + text: msg, + duration: 8000, + pos: 'top-center', + actionText: '前往', + onActionClick: function (element) { + //Set opacity of element to 0 to close Snackbar + $(element).css('opacity', 0); + window.open(link, '_blank'); + } + }); + }) +} + +//前往黑洞 +function toforeverblog() { + var msg = "点击前往按钮进入「十年之约」项目中的成员博客，不保证跳转网站的安全性和可用性"; + Snackbar.show({ + text: msg, + duration: 8000, + pos: 'top-center', + actionText: '前往', + onActionClick: function (element) { + //Set opacity of element to 0 to close Snackbar + $(element).css('opacity', 0); + window.open(link, 'https://www.foreverblog.cn/go.html'); + } + }); +} + +//前往开往项目 +function totraveling() { + btf.snackbarShow('即将跳转到「开往」项目的成员博客，不保证跳转网站的安全性和可用性', false, 5000); + setTimeout(function () { + window.open('https://travellings.link/'); + }, "5000"); } // 移除加载动画 function removeLoading() { setTimeout(function () { - preloader.endLoading() - }, 3e3) + preloader.endLoading(); + }, 3000) } -function getArrayItems(e, t) { - var o = new Array; - for (var n in e) o.push(e[n]); - for (var r = new Array, a = 0; a < t && 0 < o.length; a++) { - var i = Math.floor(Math.random() * o.length); - r[a] = o[i], o.splice(i, 1) +//移除pwa +navigator.serviceWorker.getRegistrations().then(function (registrations) { + for (let registration of registrations) { + registration.unregister() } - return r +}) + +function addFriendLink() { + var input = document.getElementsByClassName('el-textarea__inner')[0]; + let evt = document.createEvent('HTMLEvents'); + evt.initEvent('input', true, true); + input.value = '昵称（请勿包含博客等字样）：\n网站地址（要求博客地址，请勿提交个人主页）：\n头像图片url（请提供尽可能清晰的图片，我会上传到我自己的图床）：\n描述：\n'; + input.dispatchEvent(evt); + heo.scrollTo("#post-comment"); + input.focus(); + input.setSelectionRange(-1, -1); } +//从一个给定的数组arr中,随机返回num个不重复项 +function getArrayItems(arr, num) { + //新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组; + var temp_array = new Array(); + for (var index in arr) { + temp_array.push(arr[index]); + } + //取出的数值项,保存在此数组 + var return_array = new Array(); + for (var i = 0; i < num; i++) { + //判断如果数组还有可以取出的元素,以防下标越界 + if (temp_array.length > 0) { + //在数组中产生一个随机索引 + var arrIndex = Math.floor(Math.random() * temp_array.length); + //将此随机索引的对应的数组元素值复制出来 + return_array[i] = temp_array[arrIndex]; + //然后删掉此索引的数组元素,这时候temp_array变为新的数组 + temp_array.splice(arrIndex, 1); + } else { + //数组中数据项取完后,退出循环,比如数组本来只有10项,但要求取出20项. + break; + } + } + return return_array; +} + +// 检测按键 +window.onkeydown = function (e) { + if (e.keyCode === 123) { + btf.snackbarShow('开发者模式已打开，请遵循GPL协议', false, 3000) + } +} + +// 阻止搜索滚动 +// document.querySelector('#algolia-search').addEventListener('wheel', (e) => { +// e.preventDefault() +// }) +document.querySelector('#console').addEventListener('wheel', (e) => { + e.preventDefault() +}) +// document.querySelector('#loading-box').addEventListener('wheel', (e) => { +// e.preventDefault() +// }) + +//自动调整即刻短文尺寸 +window.addEventListener('resize', function () { + if (document.querySelector('#waterfall')) { + heo.reflashEssayWaterFall(); + } +}); + +//首页大卡片恢复显示 +$(".topGroup").hover(function () { + // console.log("卡片悬浮"); +}, function () { + hoverOnCommentBarrage = false; + document.getElementById("todayCard").classList.remove('hide'); + document.getElementById('todayCard').style.zIndex = 1; + // console.log("卡片停止悬浮"); +}); + +//评论增加放大功能 +// 如果当前页有评论就执行函数 +if (document.getElementById('post-comment')) owoBig(); + function owoBig() { - document.getElementById("post-comment").addEventListener("DOMNodeInserted", function (e) { - var t, o, n, a; - !e.target.classList || "OwO-body" != e.target.classList.value || (t = e.target) && (n = !(o = ""), (a = document.createElement("div")).id = "owo-big", document.querySelector("body").appendChild(a), t.addEventListener("contextmenu", function (e) { - return e.preventDefault() - }), t.addEventListener("mouseover", function (r) { - "LI" == r.target.tagName && n && (n = !1, o = setTimeout(function () { - var e = 3 * r.path[0].clientHeight, t = 3 * r.path[0].clientWidth, - o = r.x - r.offsetX - (t - r.path[0].clientWidth) / 2, n = r.y - r.offsetY; - a.style.height = e + "px", a.style.width = t + "px", a.style.left = o + "px", a.style.top = n + "px", a.style.display = "flex", a.innerHTML = '') - }, 300)) - }), t.addEventListener("mouseout", function (e) { - a.style.display = "none", n = !0, clearTimeout(o) - })) - }) + // 监听dom插入 + document.getElementById('post-comment').addEventListener('DOMNodeInserted', (dom) => { + // 如果有class且值为OwO-body + if (dom.target.classList && dom.target.classList.value == 'OwO-body') { + let owo_body = dom.target + if (owo_body) { + let owo_time = '' + let flag = true; + // 创建盒子 + let div = document.createElement('div') + div.id = 'owo-big' + document.querySelector('body').appendChild(div) + + // 禁用右键（手机端长按会出现右键菜单，为了体验给禁用掉） + owo_body.addEventListener('contextmenu', e => e.preventDefault()) + + // 鼠标移入 + owo_body.addEventListener('mouseover', (e) => { + if (e.target.tagName == 'LI' && flag) { + flag = false; + // 移入300毫秒后显示盒子 + owo_time = setTimeout(() => { + let m = 3 // 设置倍数 + let height = e.path[0].clientHeight * m // 盒子高 + let width = e.path[0].clientWidth * m // 盒子宽 + let left = (e.x - e.offsetX) - (width - e.path[0].clientWidth) / 2 // 盒子与屏幕左边距离 + let top = e.y - e.offsetY // 盒子与屏幕顶部距离 + + div.style.height = height + 'px' + div.style.width = width + 'px' + div.style.left = left + 'px' + div.style.top = top + 'px' + div.style.display = 'flex' + div.innerHTML = `` + }, 300); + } + }) + + // 鼠标移出 + owo_body.addEventListener('mouseout', (e) => { + div.style.display = 'none'; + flag = true + clearTimeout(owo_time) + }) + } + } + }); } +//文章页面上一篇下一篇 +document.addEventListener('scroll', btf.throttle(function () { + //滚动条高度+视窗高度 = 可见区域底部高度 + var visibleBottom = window.scrollY + document.documentElement.clientHeight; + //可见区域顶部高度 + var visibleTop = window.scrollY; + // 获取翻页按钮容器 + var pagination = document.getElementById('pagination'); + // 获取位置监测容器，此处采用评论区 + var eventlistner = document.getElementById('post-tools'); + if (eventlistner && pagination) { + var centerY = eventlistner.offsetTop + (eventlistner.offsetHeight / 2); + if (document.body.clientWidth > 1300) { + if (centerY < visibleBottom) { + pagination.classList.add("show-window"); + } else { + pagination.classList.remove("show-window"); + } + } + } +}, 200)) + + +// 页面百分比 function percent() { - var e = document.documentElement.scrollTop || window.pageYOffset, - t = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - document.documentElement.clientHeight, - o = Math.round(e / t * 100), n = document.querySelector("#percent"), - r = window.scrollY + document.documentElement.clientHeight, - a = document.getElementById("post-tools") || document.getElementById("footer"); - a.offsetTop + a.offsetHeight / 2 < r || 90 < o ? (document.querySelector("#nav-totop").classList.add("long"), n.innerHTML = "返回顶部") : (document.querySelector("#nav-totop").classList.remove("long"), n.innerHTML = o) + let a = document.documentElement.scrollTop || window.pageYOffset, // 卷去高度 + b = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - document.documentElement.clientHeight, // 整个网页高度 + result = Math.round(a / b * 100), // 计算百分比 + btn = document.querySelector("#percent"); // 获取按钮 + //滚动条高度+视窗高度 = 可见区域底部高度 + var visibleBottom = window.scrollY + document.documentElement.clientHeight; + // 获取位置监测容器，此处采用评论区 + var eventlistner = document.getElementById('post-tools') || document.getElementById('footer'); + var centerY = eventlistner.offsetTop + (eventlistner.offsetHeight / 2); + if ((centerY < visibleBottom) || (result > 90)) { + document.querySelector("#nav-totop").classList.add("long"); + btn.innerHTML = "返回顶部"; + } else { + document.querySelector("#nav-totop").classList.remove("long"); + btn.innerHTML = result; + } + window.onscroll = percent; } -document.addEventListener("touchstart", function (e) { - RemoveRewardMask() -}, !1); +//检查是否开启快捷键 +if (localStorage.getItem('keyboardToggle') !== 'false') { + document.querySelector("#consoleKeyboard").classList.add("on"); +} else { + document.querySelector("#consoleKeyboard").classList.remove("on"); +} + +//响应esc键 +$(window).on('keydown', function (ev) { + + // Escape + if (ev.keyCode == 27) { + heo.hideLoading(); + heo.hideConsole(); + rm.hideRightMenu(); + } + + if (heo_keyboard && ev.shiftKey && !heo_intype) { + + // 显示快捷键面板 shift键 + if (ev.keyCode == 16) { + document.querySelector("#keyboard-tips").classList.add("show"); + } + + //关闭快捷键 shift+K + if (ev.keyCode == 75) { + heo.keyboardToggle(); + return false; + } + + //响应打开控制台键 shift+A + if (ev.keyCode == 65) { + heo.showConsole(); + return false; + } + + //音乐控制 shift+M + if (ev.keyCode == 77) { + heo.musicToggle(); + return false; + } + + //随机文章 shift+R + if (ev.keyCode == 82) { + toRandomPost(); + return false; + } + + //回到首页 shift+H + if (ev.keyCode == 72) { + pjax.loadUrl("/"); + return false; + } + + //深色模式 shift+D + if (ev.keyCode == 68) { + rm.switchDarkMode(); + return false; + } + + //友链鱼塘 shift+F + if (ev.keyCode == 70) { + pjax.loadUrl("/moments/"); + return false; + } + + //友情链接页面 shift+L + if (ev.keyCode == 76) { + pjax.loadUrl("/link/"); + return false; + } + + //关于本站 shift+P + if (ev.keyCode == 80) { + pjax.loadUrl("/about/"); + return false; + } + + //在线工具 shift+T + if (ev.keyCode == 84) { + pjax.loadUrl("/tlink/"); + return false; + } + + } -$(document).unbind("keydown").bind("keydown", function (e) { - if ((e.ctrlKey || e.metaKey) && 67 == e.keyCode && "" != selectTextNow) return btf.snackbarShow("复制成功，复制和转载请标注本文地址"), rm.rightmenuCopyText(selectTextNow), !1 }); -document.addEventListener("scroll", btf.throttle(function () { - heo.initThemeColor() -}, 200)); - -navigator.serviceWorker.getRegistrations().then(function (e) { - var t, o = _createForOfIteratorHelper(e); - try { - for (o.s(); !(t = o.n()).done;) { - t.value.unregister() - } - } catch (e) { - o.e(e) - } finally { - o.f() +$(window).on('keyup', function (ev) { + // 显示快捷键面板 + if (ev.keyCode == 16) { + document.querySelector("#keyboard-tips").classList.remove("show"); } }); -window.onkeydown = function (e) { - 123 === e.keyCode && btf.snackbarShow("开发者模式已打开，请遵循GPL协议", !1, 3e3) -}; - -document.querySelector("#console").addEventListener("wheel", function (e) { - e.preventDefault() -}); - -window.addEventListener("resize", function () { - document.querySelector("#waterfall") && heo.reflashEssayWaterFall() -}); - - -document.getElementById("post-comment") && owoBig(), document.addEventListener("scroll", btf.throttle(function () { - var e, t = window.scrollY + document.documentElement.clientHeight, - o = (window.scrollY, document.getElementById("pagination")), n = document.getElementById("post-tools"); - n && o && (e = n.offsetTop + n.offsetHeight / 2, 1300 < document.body.clientWidth && (e < t ? o.classList.add("show-window") : o.classList.remove("show-window"))) -}, 200)); - -document.addEventListener("pjax:send", function () { - heo.showLoading() -}); - -document.addEventListener("load", function () { - heo.categoriesBarActive(); - heo.tagPageActive(); - heo.onlyHome(); - heo.addNavBackgroundInit(); - heo.reflashEssayWaterFall(); - heo.darkModeStatus(); - heo.initThemeColor(); - percent(); - heo.hideLoading(); -}); -heo.initThemeColor(); -window.onscroll = function () { - percent(); +//输入状态检测 +$("input").focus(function () { + heo_intype = true; +}); +$("textarea").focus(function () { + heo_intype = true; +}); +$("input").focusout(function () { + heo_intype = false; +}); +$("textarea").focusout(function () { + heo_intype = false; +}); + +//老旧浏览器检测 +function browserTC() { + btf.snackbarShow(""); + Snackbar.show({ + text: '为了保护访客访问安全，本站已停止对你正在使用的过低版本浏览器的支持', + actionText: '关闭', + duration: '6000', + pos: 'bottom-right' + }); +} + +function browserVersion() { + var userAgent = navigator.userAgent; + var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; + var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1; + var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; + var isFirefox = userAgent.indexOf("Firefox") > -1; + var isOpera = userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1; + var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Edge") == -1 && userAgent.indexOf("OPR") == -1; + var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1 && userAgent.indexOf("Edge") == -1 && userAgent.indexOf("OPR") == -1; + if (isEdge) { + if (userAgent.split('Edge/')[1].split('.')[0] < 90) { + browserTC() + } + } else if (isFirefox) { + if (userAgent.split('Firefox/')[1].split('.')[0] < 90) { + browserTC() + } + } else if (isOpera) { + if (userAgent.split('OPR/')[1].split('.')[0] < 80) { + browserTC() + } + } else if (isChrome) { + if (userAgent.split('Chrome/')[1].split('.')[0] < 90) { + browserTC() + } + } else if (isSafari) { + //不知道Safari多少版本才算老旧 + } +} + +function setCookies(obj, limitTime) { + let data = new Date(new Date().getTime() + limitTime * 24 * 60 * 60 * 1000).toUTCString() + for (let i in obj) { + document.cookie = i + '=' + obj[i] + ';expires=' + data + } +} + +function getCookie(name) { + var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); + if (arr = document.cookie.match(reg)) + return unescape(arr[2]); + else + return null; +} + +if (getCookie('browsertc') != 1) { + setCookies({ + browsertc: 1, + }, 1); //设置cookie缓存一天，即一天弹一次 + browserVersion(); +} + +//当前窗口得到焦点  +window.onfocus = function () { + document.querySelector("#keyboard-tips").classList.remove("show"); }; +//注入函数 +document.addEventListener('pjax:send', function () { + console.clear(); + Pace.restart(); + heo.showLoading(); +}) +document.addEventListener('pjax:complete', function () { + coverColor() + addRightMenuClickEvent() + navTitle() + percent() + heo.topPostScroll() + heo.topCategoriesBarScroll() + heo.sayhi() + heo.addTag() + heo.stopImgRightDrag() + heo.addFriendLinksInFooter() + heo.qrcodeCreate() + heo.hidecookie() + heo.onlyHome() + heo.addNavBackgroundInit() + heo.initIndexEssay() + heo.changeTimeInEssay() + heo.reflashEssayWaterFall() + heo.addMediumInEssay() + heo.darkModeStatus() + heo.categoriesBarActive() + heo.initThemeColor() + heo.hideLoading() + heo.tagPageActive() +}) \ No newline at end of file diff --git a/templates/assets/zhheo/commentBarrage.css b/templates/assets/zhheo/commentBarrage.css new file mode 100644 index 00000000..b96dfb56 --- /dev/null +++ b/templates/assets/zhheo/commentBarrage.css @@ -0,0 +1,165 @@ +.comment-barrage { + position: fixed; + bottom: 0; + right: 20px; + padding: 0 0 20px 10px; + z-index: 100; + display: flex; + flex-direction: column; + justify-content: end; + align-items: flex-end; + z-index: 999; + transition: 0.3s; +} + +@media screen and (max-width: 768px) { + .comment-barrage { + display: none !important; + } +} + +.comment-barrage-item { + min-width: 300px; + max-width: 300px; + width: fit-content; + min-height: 80px; + max-height: 150px; + margin: 4px; + padding: 8px 14px; + background: var(--heo-maskbgdeep); + border-radius: 8px; + color: var(--heo-fontcolor); + animation: barrageIn 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); + transition: 0.3s; + display: flex; + flex-direction: column; + border: var(--style-border); + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); + position: fixed; + box-shadow: var(--heo-shadow-border); + overflow: hidden; +} + +.comment-barrage-item:hover { + border: var(--style-border-hover); + box-shadow: var(--heo-shadow-main); +} + +.comment-barrage-item.out { + opacity: 0; + animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); +} + +.comment-barrage-item.hovered { + opacity: 0; +} + +.comment-barrage-item .comment-barrage-close { + color: var(--heo-secondtext); + cursor: pointer; + line-height: 1; + padding: 4px; +} + +.comment-barrage-item .comment-barrage-close:hover { + color: var(--heo-main); +} + +.comment-barrage-item pre { + display: none; +} + +.comment-barrage-item p img:not(.tk-owo-emotion) { + display: none; +} + +.comment-barrage-item p img.tk-owo-emotion { + width: 16px; + padding: 0; + margin: 0; + transform: translateY(2px); +} + +.comment-barrage-item blockquote { + display: none; +} + +.comment-barrage-item br { + display: none; +} + +.comment-barrage-item .barrageHead { + height: 30px; + padding: 0; + line-height: 30px; + font-size: 12px; + border-bottom: var(--style-border); + display: flex; + justify-content: space-between; + align-items: center; + font-weight: bold; + padding-bottom: 6px; +} + +.comment-barrage-item .barrageHead .barrageTitle { + color: var(--heo-card-bg); + margin-right: 8px; + background: var(--heo-fontcolor); + line-height: 1; + padding: 4px; + border-radius: 4px; +} + +.comment-barrage-item .barrageHead .barrageTitle:hover { + background: var(--heo-main); + color: var(--heo-white); +} + +.comment-barrage-item .barrageAvatar { + width: 16px; + height: 16px; + margin: 0; + margin-left: auto; + margin-right: 8px; + border-radius: 50%; + background: var(--heo-secondbg); +} + +.comment-barrage-item .barrageContent { + font-size: 14px !important; + font-weight: normal !important; + height: calc(100% - 30px); + overflow: hidden; + width: fit-content; +} + +.comment-barrage-item .barrageContent a { + pointer-events: none; +} + +.comment-barrage-item .barrageContent::-webkit-scrollbar { + height: 0; + width: 4px; +} + +.comment-barrage-item .barrageContent::-webkit-scrollbar-button { + display: none; +} + +.comment-barrage-item p { + margin: 8px 0; + line-height: 1.3; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + display: -webkit-box; + -webkit-box-orient: vertical; + font-size: 14; +} + +.comment-barrage-item .barrageContent h1, .comment-barrage-item .barrageContent h2, .comment-barrage-item .barrageContent h3, .comment-barrage-item .barrageContent h4 { + font-size: 14px !important; + font-weight: normal !important; + margin: 8px 0 !important; +} \ No newline at end of file diff --git a/templates/assets/zhheo/commentBarrage.js b/templates/assets/zhheo/commentBarrage.js new file mode 100644 index 00000000..d7b66a70 --- /dev/null +++ b/templates/assets/zhheo/commentBarrage.js @@ -0,0 +1,150 @@ +var commentBarrageConfig = { + //同时最多显示弹幕数 + maxBarrage: 1, + //弹幕显示间隔时间ms + barrageTime: 4000, + //twikoo部署地址腾讯云的为环境ID + twikooUrl: "xxxx", + //token获取见上方 + accessToken: "xxxx", + pageUrl: window.location.pathname, + barrageTimer: [], + barrageList: [], + barrageIndex: 0, + dom: document.querySelector('.comment-barrage'), +} + +var commentInterval = null; +var hoverOnCommentBarrage = false; + +$(".comment-barrage").hover(function () { + hoverOnCommentBarrage = true; + console.log("热评悬浮"); +}, function () { + hoverOnCommentBarrage = false; + console.log("停止悬浮"); +}); + +function initCommentBarrage() { + // console.log("开始创建热评") + + var data = JSON.stringify({ + "event": "COMMENT_GET", + "commentBarrageConfig.accessToken": commentBarrageConfig.accessToken, + "url": commentBarrageConfig.pageUrl + }); + var xhr = new XMLHttpRequest(); + xhr.withCredentials = true; + xhr.addEventListener("readystatechange", function () { + if (this.readyState === 4) { + commentBarrageConfig.barrageList = commentLinkFilter(JSON.parse(this.responseText).data); + commentBarrageConfig.dom.innerHTML = ''; + } + }); + xhr.open("POST", commentBarrageConfig.twikooUrl); + xhr.setRequestHeader("Content-Type", "application/json"); + xhr.send(data); + + + clearInterval(commentInterval); + commentInterval = null; + + commentInterval = setInterval(() => { + if (commentBarrageConfig.barrageList.length && !hoverOnCommentBarrage) { + popCommentBarrage(commentBarrageConfig.barrageList[commentBarrageConfig.barrageIndex]); + commentBarrageConfig.barrageIndex += 1; + commentBarrageConfig.barrageIndex %= commentBarrageConfig.barrageList.length; + } + if ((commentBarrageConfig.barrageTimer.length > (commentBarrageConfig.barrageList.length > commentBarrageConfig.maxBarrage ? commentBarrageConfig.maxBarrage : commentBarrageConfig.barrageList.length)) && !hoverOnCommentBarrage) { + removeCommentBarrage(commentBarrageConfig.barrageTimer.shift()) + } + }, commentBarrageConfig.barrageTime) +} + +function commentLinkFilter(data) { + data.sort((a, b) => { + return a.created - b.created; + }) + let newData = []; + data.forEach(item => { + newData.push(...getCommentReplies(item)); + }); + return newData; +} + +function getCommentReplies(item) { + if (item.replies) { + let replies = [item]; + item.replies.forEach(item => { + replies.push(...getCommentReplies(item)); + }) + return replies; + } else { + return []; + } +} + +function popCommentBarrage(data) { + let barrage = document.createElement('div'); + let width = commentBarrageConfig.dom.clientWidth; + let height = commentBarrageConfig.dom.clientHeight; + barrage.className = 'comment-barrage-item' + barrage.innerHTML = ` +
+ 热评 +
${data.nick}
+ + +
+ ${data.comment} + ` + commentBarrageConfig.barrageTimer.push(barrage); + commentBarrageConfig.dom.append(barrage); +} + +function removeCommentBarrage(barrage) { + barrage.className = 'comment-barrage-item out'; + setTimeout(() => { + commentBarrageConfig.dom.removeChild(barrage); + }, 1000) +} + + +// 自动隐藏 +document.addEventListener('scroll', btf.throttle(function () { + //滚动条高度+视窗高度 = 可见区域底部高度 + var visibleBottom = window.scrollY + document.documentElement.clientHeight; + //可见区域顶部高度 + var visibleTop = window.scrollY; + // 获取翻页按钮容器 + var pagination = document.querySelector('.comment-barrage'); + // 获取位置监测容器，此处采用评论区 + var eventlistner = document.getElementById('post-tools'); + if (eventlistner && pagination) { + var centerY = eventlistner.offsetTop + (eventlistner.offsetHeight / 2); + if (document.body.clientWidth > 768) { + if (centerY > visibleBottom) { + pagination.style.bottom = '0'; + } else { + pagination.style.bottom = '-200px'; + } + } + } +}, 200)) + +initCommentBarrage(); + +if (localStorage.getItem('commentBarrageSwitch') !== 'false') { + $(".comment-barrage").show(); + $(".menu-commentBarrage-text").text("关闭热评"); + document.querySelector("#consoleCommentBarrage").classList.add("on"); +} else { + $(".comment-barrage").hide(); + $(".menu-commentBarrage-text").text("显示热评"); + document.querySelector("#consoleCommentBarrage").classList.remove("on"); +} + + +document.addEventListener('pjax:send', function () { + clearInterval(commentInterval); +}); \ No newline at end of file diff --git a/templates/assets/zhheo/rightmenu.js b/templates/assets/zhheo/rightmenu.js index 22f75cf2..463a82c1 100644 --- a/templates/assets/zhheo/rightmenu.js +++ b/templates/assets/zhheo/rightmenu.js @@ -1,342 +1,419 @@ -"use strict"; +// 初始化函数 +let rm = {}; -function asyncGeneratorStep(e, n, t, o, i, r, c) { - try { - var m = e[r](c), - a = m.value; - } catch (e) { - return void t(e); +//禁止图片拖拽 +rm.stopdragimg = $("img"); +rm.stopdragimg.on("dragstart", function () { + return false; +}); + +// 显示菜单 +rm.showRightMenu = function (isTrue, x = 0, y = 0) { + let $rightMenu = $('#rightMenu'); + $rightMenu.css('top', x + 'px').css('left', y + 'px'); + if (isTrue) { + $rightMenu.show(); + stopMaskScroll() + } else { + $rightMenu.hide(); } - m.done ? n(a) : Promise.resolve(a).then(o, i); } -function _asyncToGenerator(m) { - return function () { - var e = this, - c = arguments; - return new Promise(function (n, t) { - var o = m.apply(e, c); - - function i(e) { - asyncGeneratorStep(o, n, t, i, r, "next", e); - } - - function r(e) { - asyncGeneratorStep(o, n, t, i, r, "throw", e); - } - - i(void 0); - }); - }; +// 隐藏菜单 +rm.hideRightMenu = function () { + rm.showRightMenu(false); + $('#rightmenu-mask').attr('style', 'display: none'); } -var rm = {}; -(rm.stopdragimg = $("img")), - rm.stopdragimg.on("dragstart", function () { - return !1; - }), - (rm.showRightMenu = function (e) { - var n = 1 < arguments.length && void 0 !== arguments[1] ? arguments[1] : 0, - t = 2 < arguments.length && void 0 !== arguments[2] ? arguments[2] : 0, - o = $("#rightMenu"); - o.css("top", n + "px").css("left", t + "px"), - e ? (o.show(), stopMaskScroll()) : o.hide(); - }), - (rm.hideRightMenu = function () { - rm.showRightMenu(!1), $("#rightmenu-mask").attr("style", "display: none"); - }); -var rmWidth = $("#rightMenu").width(), - rmHeight = $("#rightMenu").height(); +// 尺寸 +let rmWidth = $('#rightMenu').width(); +let rmHeight = $('#rightMenu').height(); + +// 重新定义尺寸 rm.reloadrmSize = function () { - (rmWidth = $("#rightMenu").width()), (rmHeight = $("#rightMenu").height()); + rmWidth = $('#rightMenu').width(); + rmHeight = $('#rightMenu').height(); +} + +// 获取点击的href +let domhref = ''; +let domImgSrc = ''; +let globalEvent = null; + +// 监听右键初始化 +window.oncontextmenu = function (event) { + if (document.body.clientWidth > 768) { + let pageX = event.clientX + 10; //加10是为了防止显示时鼠标遮在菜单上 + let pageY = event.clientY; + // console.log(event); + + //其他额外菜单 + let $rightMenuOther = $('.rightMenuOther'); + let $rightMenuPlugin = $('.rightMenuPlugin'); + let $rightMenuCopyText = $('#menu-copytext'); + let $rightMenuPasteText = $('#menu-pastetext'); + let $rightMenuCommentText = $('#menu-commenttext'); + let $rightMenuNewWindow = $('#menu-newwindow'); + let $rightMenuCopyLink = $('#menu-copylink'); + let $rightMenuCopyImg = $('#menu-copyimg'); + let $rightMenuDownloadImg = $('#menu-downloadimg'); + let $rightMenuSearch = $('#menu-search'); + let $rightMenuSearchBaidu = $('#menu-searchBaidu'); + let $rightMenuMusicToggle = $('#menu-music-toggle'); + let $rightMenuMusicBack = $('#menu-music-back'); + let $rightMenuMusicForward = $('#menu-music-forward'); + let $rightMenuMusicPlaylist = $('#menu-music-playlist'); + let $rightMenuMusicCopyMusicName = $('#menu-music-copyMusicName'); + let href = event.target.href; + let imgsrc = event.target.currentSrc; + + // 判断模式 扩展模式为有事件 + let pluginMode = false; + $rightMenuOther.show(); + globalEvent = event; + + // 检查是否需要复制 是否有选中文本 + if (selectTextNow && window.getSelection()) { + pluginMode = true; + $rightMenuCopyText.show(); + $rightMenuCommentText.show(); + $rightMenuSearch.show(); + $rightMenuSearchBaidu.show(); + } else { + $rightMenuCopyText.hide(); + $rightMenuCommentText.hide(); + $rightMenuSearchBaidu.hide(); + $rightMenuSearch.hide(); + } + + //检查是否右键点击了链接a标签 + if (href) { + pluginMode = true; + $rightMenuNewWindow.show(); + $rightMenuCopyLink.show(); + domhref = href; + } else { + $rightMenuNewWindow.hide(); + $rightMenuCopyLink.hide(); + } + + //检查是否需要复制图片 + if (imgsrc) { + pluginMode = true; + $rightMenuCopyImg.show(); + $rightMenuDownloadImg.show(); + domImgSrc = imgsrc; + } else { + $rightMenuCopyImg.hide(); + $rightMenuDownloadImg.hide(); + } + + // 判断是否为输入框 + if (event.target.tagName.toLowerCase() === 'input' || event.target.tagName.toLowerCase() === 'textarea') { + console.log('这是一个输入框') + pluginMode = true; + $rightMenuPasteText.show(); + } else { + $rightMenuPasteText.hide(); + } + + //判断是否是音乐 + if (event.target.nodeName == "METING-JS") { + console.log('这是一个音乐'); + pluginMode = true; + $rightMenuMusicToggle.show(); + $rightMenuMusicBack.show(); + $rightMenuMusicForward.show(); + $rightMenuMusicPlaylist.show(); + $rightMenuMusicCopyMusicName.show(); + } else { + $rightMenuMusicToggle.hide(); + $rightMenuMusicBack.hide(); + $rightMenuMusicForward.hide(); + $rightMenuMusicPlaylist.hide(); + $rightMenuMusicCopyMusicName.hide() + } + + // 如果不是扩展模式则隐藏扩展模块 + if (pluginMode) { + $rightMenuOther.hide(); + $rightMenuPlugin.show(); + } else { + $rightMenuPlugin.hide() + } + + rm.reloadrmSize() + + // 鼠标默认显示在鼠标右下方，当鼠标靠右或考下时，将菜单显示在鼠标左方\上方 + if (pageX + rmWidth > window.innerWidth) { + pageX -= rmWidth + 10; + } + if (pageY + rmHeight > window.innerHeight) { + pageY -= pageY + rmHeight - window.innerHeight; + } + + rm.showRightMenu(true, pageY, pageX); + $('#rightmenu-mask').attr('style', 'display: flex'); + return false; + } }; -var domhref = "", - domImgSrc = "", - globalEvent = null; -function imageToBlob(e) { - var t = new Image(), - o = document.createElement("canvas"), - i = o.getContext("2d"); - return ( - (t.crossOrigin = ""), - (t.src = e), - new Promise(function (n) { - t.onload = function () { - (o.width = this.naturalWidth), - (o.height = this.naturalHeight), - i.drawImage(this, 0, 0), - o.toBlob( - function (e) { - n(e); - }, - "image/png", - 0.75 - ); - }; - }) - ); +// 下载图片状态 +rm.downloadimging = false; + +// 复制图片到剪贴板 +rm.writeClipImg = function (imgsrc) { + console.log('按下复制'); + rm.hideRightMenu(); + btf.snackbarShow('正在下载中，请稍后', false, 10000) + if (rm.downloadimging == false) { + rm.downloadimging = true; + setTimeout(function () { + copyImage(imgsrc); + btf.snackbarShow('复制成功！图片已添加盲水印，请遵守版权协议'); + rm.downloadimging = false; + }, "10000") + } } -function copyImage(e) { - return _copyImage.apply(this, arguments); +function imageToBlob(imageURL) { + const img = new Image; + const c = document.createElement("canvas"); + const ctx = c.getContext("2d"); + img.crossOrigin = ""; + img.src = imageURL; + return new Promise(resolve => { + img.onload = function () { + c.width = this.naturalWidth; + c.height = this.naturalHeight; + ctx.drawImage(this, 0, 0); + c.toBlob((blob) => { + // here the image is a blob + resolve(blob) + }, "image/png", 0.75); + }; + }) } -function _copyImage() { - return (_copyImage = _asyncToGenerator( - regeneratorRuntime.mark(function e(n) { - var t, o; - return regeneratorRuntime.wrap(function (e) { - for (; ;) - switch ((e.prev = e.next)) { - case 0: - return (e.next = 2), imageToBlob(n); - case 2: - (t = e.sent), - (o = new ClipboardItem({"image/png": t})), - navigator.clipboard.write([o]); - case 5: - case "end": - return e.stop(); - } - }, e); - }) - )).apply(this, arguments); +async function copyImage(imageURL) { + const blob = await imageToBlob(imageURL) + const item = new ClipboardItem({"image/png": blob}); + navigator.clipboard.write([item]); +} + +rm.switchDarkMode = function () { + navFn.switchDarkMode(); + rm.hideRightMenu(); + heo.darkModeStatus(); +} + +rm.copyUrl = function (id) { + $("body").after(""); + var text = id; + var input = document.getElementById("copyVal"); + input.value = text; + input.select(); + input.setSelectionRange(0, input.value.length); + document.execCommand("copy"); + $("#copyVal").remove(); } function stopMaskScroll() { - document.getElementById("rightmenu-mask") && - document.getElementById("rightmenu-mask").addEventListener( - "mousewheel", - function (e) { + if (document.getElementById("rightmenu-mask")) { + let xscroll = document.getElementById("rightmenu-mask"); + xscroll.addEventListener("mousewheel", function (e) { + //阻止浏览器默认方法 rm.hideRightMenu(); - }, - !1 - ), - document.getElementById("rightMenu") && - document.getElementById("rightMenu").addEventListener( - "mousewheel", - function (e) { + // e.preventDefault(); + }, false); + } + if (document.getElementById("rightMenu")) { + let xscroll = document.getElementById("rightMenu"); + xscroll.addEventListener("mousewheel", function (e) { + //阻止浏览器默认方法 rm.hideRightMenu(); - }, - !1 - ); + // e.preventDefault(); + }, false); + } } -(window.oncontextmenu = function (e) { - if (768 < document.body.clientWidth) { - var n = e.clientX + 10, - t = e.clientY, - o = $(".rightMenuOther"), - i = $(".rightMenuPlugin"), - r = $("#menu-copytext"), - c = $("#menu-pastetext"), - m = $("#menu-commenttext"), - a = $("#menu-newwindow"), - u = $("#menu-copylink"), - h = $("#menu-copyimg"), - d = $("#menu-downloadimg"), - s = $("#menu-search"), - l = $("#menu-searchBaidu"), - g = $("#menu-music-toggle"), - w = $("#menu-music-back"), - f = $("#menu-music-forward"), - p = $("#menu-music-playlist"), - k = $("#menu-music-copyMusicName"), - y = e.target.href, - v = e.target.currentSrc, - M = !1; - return ( - o.show(), - (globalEvent = e), - selectTextNow && window.getSelection() - ? ((M = !0), r.show(), m.show(), s.show(), l.show()) - : (r.hide(), m.hide(), l.hide(), s.hide()), - y ? ((M = !0), a.show(), u.show(), (domhref = y)) : (a.hide(), u.hide()), - v - ? ((M = !0), h.show(), d.show(), (domImgSrc = v)) - : (h.hide(), d.hide()), - "input" === e.target.tagName.toLowerCase() || - "textarea" === e.target.tagName.toLowerCase() - ? (console.log("这是一个输入框"), (M = !0), c.show()) - : c.hide(), - "METING-JS" == e.target.nodeName - ? (console.log("这是一个音乐"), - (M = !0), - g.show(), - w.show(), - f.show(), - p.show(), - k.show()) - : (g.hide(), w.hide(), f.hide(), p.hide(), k.hide()), - M ? (o.hide(), i.show()) : i.hide(), - rm.reloadrmSize(), - n + rmWidth > window.innerWidth && (n -= rmWidth + 10), - t + rmHeight > window.innerHeight && - (t -= t + rmHeight - window.innerHeight), - rm.showRightMenu(!0, t, n), - $("#rightmenu-mask").attr("style", "display: flex"), - !1 - ); +rm.rightmenuCopyText = function (txt) { + if (navigator.clipboard) { + navigator.clipboard.writeText(txt); } -}), - (rm.downloadimging = !1), - (rm.writeClipImg = function (e) { - console.log("按下复制"), - rm.hideRightMenu(), - btf.snackbarShow("正在下载中，请稍后", !1, 1e4), - 0 == rm.downloadimging && - ((rm.downloadimging = !0), - setTimeout(function () { - copyImage(e), - btf.snackbarShow("复制成功！图片已添加盲水印，请遵守版权协议"), - (rm.downloadimging = !1); - }, "10000")); - }), - (rm.switchDarkMode = function () { - navFn.switchDarkMode(), rm.hideRightMenu(), heo.darkModeStatus(); - }), - (rm.copyUrl = function (e) { - $("body").after(""); - var n = e, - t = document.getElementById("copyVal"); - (t.value = n), - t.select(), - t.setSelectionRange(0, t.value.length), - document.execCommand("copy"), - $("#copyVal").remove(); - }), - (rm.rightmenuCopyText = function (e) { - navigator.clipboard && navigator.clipboard.writeText(e), rm.hideRightMenu(); - }), - (rm.copyPageUrl = function () { - var e = window.location.href; - rm.copyUrl(e), - btf.snackbarShow("复制本页链接地址成功", !1, 2e3), - rm.hideRightMenu(); - }), - (rm.sharePage = function () { - window.location.href; - rm.copyUrl(url), - btf.snackbarShow("复制本页链接地址成功", !1, 2e3), - rm.hideRightMenu(); - }); -var selectTextNow = ""; + rm.hideRightMenu(); +} + +rm.copyPageUrl = function () { + var url = window.location.href; + rm.copyUrl(url); + btf.snackbarShow('复制本页链接地址成功', false, 2000); + rm.hideRightMenu(); +} + +rm.sharePage = function () { + var content = window.location.href; + rm.copyUrl(url); + btf.snackbarShow('复制本页链接地址成功', false, 2000); + rm.hideRightMenu(); +} + +// 复制当前选中文本 +var selectTextNow = ''; +document.onmouseup = document.ondbclick = selceText; function selceText() { - var e = document.selection - ? document.selection.createRange().text - : window.getSelection() + ""; - selectTextNow = e || ""; + var txt; + if (document.selection) { + txt = document.selection.createRange().text; + } else { + txt = window.getSelection() + ''; + } + if (txt) { + selectTextNow = txt; + // console.log(selectTextNow); + } else { + selectTextNow = ''; + } } -function replaceAll(e, n, t) { - return e.split(n).join(t); +// 读取剪切板 +rm.readClipboard = function () { + if (navigator.clipboard) { + navigator.clipboard.readText().then(clipText => rm.insertAtCaret(globalEvent.target, clipText)); + } +} + +// 粘贴文本到焦点 +rm.insertAtCaret = function (elemt, value) { + const startPos = elemt.selectionStart, + endPos = elemt.selectionEnd; + if (document.selection) { + elemt.focus(); + var sel = document.selection.createRange(); + sel.text = value; + elemt.focus(); + } else { + if (startPos || startPos == '0') { + var scrollTop = elemt.scrollTop; + elemt.value = elemt.value.substring(0, startPos) + value + elemt.value.substring(endPos, elemt.value.length); + elemt.focus(); + elemt.selectionStart = startPos + value.length; + elemt.selectionEnd = startPos + value.length; + elemt.scrollTop = scrollTop; + } else { + elemt.value += value; + elemt.focus(); + } + } +} + +//粘贴文本 +rm.pasteText = function () { + const result = rm.readClipboard() || ''; + rm.hideRightMenu(); +} + +//引用到评论 +rm.rightMenuCommentText = function (txt) { + rm.hideRightMenu(); + var input = document.getElementsByClassName('el-textarea__inner')[0]; + let evt = document.createEvent('HTMLEvents'); + evt.initEvent('input', true, true); + let inputValue = replaceAll(txt, '\n', '\n> ') + input.value = '> ' + inputValue + '\n\n'; + input.dispatchEvent(evt); + var domTop = document.querySelector("#post-comment").offsetTop; + window.scrollTo(0, domTop - 80); + input.focus(); + input.setSelectionRange(-1, -1); + if (document.getElementById("comment-tips")) { + document.getElementById("comment-tips").classList.add("show"); + } +} + +//替换所有内容 +function replaceAll(string, search, replace) { + return string.split(search).join(replace); +} + +// 百度搜索 +rm.searchBaidu = function () { + btf.snackbarShow('即将跳转到百度搜索', false, 2000); + setTimeout(function () { + window.open('https://www.baidu.com/s?wd=' + selectTextNow); + }, "2000"); + rm.hideRightMenu(); +} + +//分享链接 +rm.copyLink = function () { + rm.rightmenuCopyText(domhref); + btf.snackbarShow('已复制链接地址'); } function addRightMenuClickEvent() { - $("#menu-backward").on("click", function () { - window.history.back(), rm.hideRightMenu(); - }), - $("#menu-forward").on("click", function () { - window.history.forward(), rm.hideRightMenu(); - }), - $("#menu-refresh").on("click", function () { - window.location.reload(); - }), - $("#menu-top").on("click", function () { - btf.scrollToDest(0, 500), rm.hideRightMenu(); - }), - $(".menu-link").on("click", rm.hideRightMenu), - $("#menu-darkmode").on("click", rm.switchDarkMode), - $("#menu-home").on("click", function () { - window.location.href = window.location.origin; - }), - // $("#menu-randomPost").on("click", function () { - // toRandomPost(); - // }), - $("#menu-commentBarrage").on("click", heo.switchCommentBarrage), - $("#rightmenu-mask").on("click", rm.hideRightMenu), - $("#rightmenu-mask").contextmenu(function () { - return rm.hideRightMenu(), !1; - }), - $("#menu-copy").on("click", rm.copyPageUrl), - $("#menu-pastetext").on("click", rm.pasteText), - $("#menu-copytext").on("click", function () { - rm.rightmenuCopyText(selectTextNow), - btf.snackbarShow("复制成功，复制和转载请标注本文地址"); - }), - $("#menu-commenttext").on("click", function () { - rm.rightMenuCommentText(selectTextNow); - }), - $("#menu-newwindow").on("click", function () { - window.open(domhref), rm.hideRightMenu(); - }), - $("#menu-copylink").on("click", rm.copyLink), - $("#menu-downloadimg").on("click", function () { - heo.downloadImage(domImgSrc, "zhheo"); - }), - $("#menu-copyimg").on("click", function () { - rm.writeClipImg(domImgSrc); - }), - $("#menu-searchBaidu").on("click", rm.searchBaidu), - $("#menu-music-toggle").on("click", heo.musicToggle), - $("#menu-music-back").on("click", heo.musicSkipBack), - $("#menu-music-forward").on("click", heo.musicSkipForward), - $("#menu-music-copyMusicName").on("click", function () { - rm.rightmenuCopyText(heo.musicGetName()), - btf.snackbarShow("复制歌曲名称成功", !1, 3e3); - }); -} - -(document.onmouseup = document.ondbclick = selceText), - (rm.readClipboard = function () { - navigator.clipboard && - navigator.clipboard.readText().then(function (e) { - return rm.insertAtCaret(globalEvent.target, e); - }); - }), - (rm.insertAtCaret = function (e, n) { - var t, - o = e.selectionStart, - i = e.selectionEnd; - document.selection - ? (e.focus(), (document.selection.createRange().text = n), e.focus()) - : o || "0" == o - ? ((t = e.scrollTop), - (e.value = - e.value.substring(0, o) + n + e.value.substring(i, e.value.length)), - e.focus(), - (e.selectionStart = o + n.length), - (e.selectionEnd = o + n.length), - (e.scrollTop = t)) - : ((e.value += n), e.focus()); - }), - (rm.pasteText = function () { - rm.readClipboard(); + // 添加点击事件 + $('#menu-backward').on('click', function () { + window.history.back(); rm.hideRightMenu(); - }), - (rm.rightMenuCommentText = function (e) { - rm.hideRightMenu(); - var n = document.getElementsByClassName("el-textarea__inner")[0], - t = document.createEvent("HTMLEvents"); - t.initEvent("input", !0, !0); - var o = replaceAll(e, "\n", "\n> "); - (n.value = "> " + o + "\n\n"), n.dispatchEvent(t); - var i = document.querySelector("#post-comment").offsetTop; - window.scrollTo(0, i - 80), - n.focus(), - n.setSelectionRange(-1, -1), - document.getElementById("comment-tips") && - document.getElementById("comment-tips").classList.add("show"); - }), - (rm.searchBaidu = function () { - btf.snackbarShow("即将跳转到百度搜索", !1, 2e3), - setTimeout(function () { - window.open("https://www.baidu.com/s?wd=" + selectTextNow); - }, "2000"), - rm.hideRightMenu(); - }), - (rm.copyLink = function () { - rm.rightmenuCopyText(domhref), btf.snackbarShow("已复制链接地址"); }); + $('#menu-forward').on('click', function () { + window.history.forward(); + rm.hideRightMenu(); + }); + $('#menu-refresh').on('click', function () { + window.location.reload(); + }); + $('#menu-top').on('click', function () { + btf.scrollToDest(0, 500); + rm.hideRightMenu(); + }); + $('.menu-link').on('click', rm.hideRightMenu); + $('#menu-darkmode').on('click', rm.switchDarkMode); + $('#menu-home').on('click', function () { + window.location.href = window.location.origin; + }); + $('#menu-randomPost').on('click', function () { + toRandomPost() + }); + $('#menu-commentBarrage').on('click', heo.switchCommentBarrage); + $('#rightmenu-mask').on('click', rm.hideRightMenu); + $('#rightmenu-mask').contextmenu(function () { + rm.hideRightMenu(); + return false; + }); + $('#menu-translate').on('click', function () { + rm.hideRightMenu(); + translateInitialization(); + }); + $('#menu-copy').on('click', rm.copyPageUrl); + $('#menu-pastetext').on('click', rm.pasteText); + $('#menu-copytext').on('click', function () { + rm.rightmenuCopyText(selectTextNow); + btf.snackbarShow('复制成功，复制和转载请标注本文地址'); + }); + $('#menu-commenttext').on('click', function () { + rm.rightMenuCommentText(selectTextNow); + }); + $('#menu-newwindow').on('click', function () { + window.open(domhref); + rm.hideRightMenu(); + }); + $('#menu-copylink').on('click', rm.copyLink); + $('#menu-downloadimg').on('click', function () { + heo.downloadImage(domImgSrc, 'zhheo'); + }); + $('#menu-copyimg').on('click', function () { + rm.writeClipImg(domImgSrc); + }); + $('#menu-searchBaidu').on('click', rm.searchBaidu); + //音乐 + $('#menu-music-toggle').on('click', heo.musicToggle); + $('#menu-music-back').on('click', heo.musicSkipBack); + $('#menu-music-forward').on('click', heo.musicSkipForward); + $('#menu-music-copyMusicName').on('click', function () { + rm.rightmenuCopyText(heo.musicGetName()); + btf.snackbarShow('复制歌曲名称成功', false, 3000); + }); +} diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css index 03233b3f..2795b3be 100644 --- a/templates/assets/zhheo/zhheoblog.css +++ b/templates/assets/zhheo/zhheoblog.css @@ -1,3 +1,5 @@ +@charset "UTF-8"; + :root { --heo-white: #fff; --heo-white-op: rgba(255, 255, 255, 0.2); @@ -9,6 +11,7 @@ --heo-vip: #e5a80d; --heo-main: var(--heo-theme); --heo-main-op: var(--heo-theme-op); + --heo-main-op-deep: var(--heo-theme-op-deep); --heo-main-none: var(--heo-theme-none); --heo-shadow-theme: 0 8px 12px -3px var(--heo-theme-op); --heo-shadow-blackdeep: 0 2px 16px -3px rgba(0, 0, 0, 0.15); @@ -33,7 +36,7 @@ color: var(--heo-background); } -[data-theme="light"] { +[data-theme=light] { --heo-theme: #425AEF; --heo-theme-op: #4259ef23; --heo-theme-op-deep: #4259efdd; @@ -70,7 +73,7 @@ --style-border-forever: 2px solid var(--heo-main); } -[data-theme="dark"] { +[data-theme=dark] { --heo-theme: #0084FF; --heo-theme-op: #0084FF23; --heo-theme-op-deep: #0084ffdd; @@ -138,6 +141,7 @@ } } +/* 旧版css */ html { line-height: 1.15; text-size-adjust: 100%; @@ -282,10 +286,6 @@ textarea { font: inherit; } -details { - display: block; -} - summary { display: list-item; } @@ -323,6 +323,13 @@ template { .article-sort-item-title, .limit-more-line, .relatedPosts > .relatedPosts-list .content .title, +figure.gallery-group .gallery-group-name, +figure.gallery-group p { + display: -webkit-box; + overflow: hidden; + -webkit-box-orient: vertical; +} + #article-container h1::before, #article-container h2::before, #article-container h3::before, @@ -741,7 +748,7 @@ body { position: relative; min-height: 100%; background: var(--global-bg); - color: var(--font-color); + color: var(--heo-fontcolor); font-size: var(--global-font-size); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"; line-height: 2; @@ -750,7 +757,7 @@ body { } input::placeholder { - color: var(--font-color); + color: var(--heo-fontcolor); } #web_bg { @@ -914,6 +921,133 @@ img[src=""] { --hlexpand-bg: linear-gradient(180deg, rgba(33, 33, 33, 0.6), rgba(33, 33, 33, 0.9)); } +/*figure.highlight table::-webkit-scrollbar-thumb {*/ +/* background: var(--hlscrollbar-bg);*/ +/*}*/ + +/*figure.highlight pre .deletion {*/ +/* color: rgb(191, 66, 191);*/ +/*}*/ + +/*figure.highlight pre .addition {*/ +/* color: rgb(16, 94, 222);*/ +/*}*/ + +/*figure.highlight pre .meta {*/ +/* color: rgb(199, 146, 234);*/ +/*}*/ + +/*figure.highlight pre .comment {*/ +/* color: rgb(150, 152, 150);*/ +/*}*/ + +/*figure.highlight pre .attribute,*/ +/*figure.highlight pre .css .class,*/ +/*figure.highlight pre .css .id,*/ +/*figure.highlight pre .css .pseudo,*/ +/*figure.highlight pre .html .doctype,*/ +/*figure.highlight pre .regexp,*/ +/*figure.highlight pre .ruby .constant,*/ +/*figure.highlight pre .tag .name,*/ +/*figure.highlight pre .variable,*/ +/*figure.highlight pre .xml .doctype,*/ +/*figure.highlight pre .xml .pi,*/ +/*figure.highlight pre .xml .tag .title {*/ +/* color: var(--heo-red);*/ +/*}*/ + +/*figure.highlight pre .tag {*/ +/* color: rgb(137, 221, 255);*/ +/*}*/ + +/*figure.highlight pre .command,*/ +/*figure.highlight pre .constant,*/ +/*figure.highlight pre .literal,*/ +/*figure.highlight pre .number,*/ +/*figure.highlight pre .params,*/ +/*figure.highlight pre .preprocessor {*/ +/* color: var(--heo-orange);*/ +/*}*/ + +/*figure.highlight pre .built_in {*/ +/* color: var(--heo-yellow);*/ +/*}*/ + +/*figure.highlight pre .css .rules .attribute,*/ +/*figure.highlight pre .formula,*/ +/*figure.highlight pre .header,*/ +/*figure.highlight pre .inheritance,*/ +/*figure.highlight pre .number,*/ +/*figure.highlight pre .ruby .class .title,*/ +/*figure.highlight pre .ruby .symbol,*/ +/*figure.highlight pre .special,*/ +/*figure.highlight pre .string,*/ +/*figure.highlight pre .value,*/ +/*figure.highlight pre .xml .cdata {*/ +/* color: var(--heo-green);*/ +/*}*/ + +/*figure.highlight pre .css .hexcolor,*/ +/*figure.highlight pre .keyword,*/ +/*figure.highlight pre .title {*/ +/* color: rgb(137, 221, 255);*/ +/*}*/ + +/*figure.highlight pre .coffeescript .title,*/ +/*figure.highlight pre .function,*/ +/*figure.highlight pre .javascript .title,*/ +/*figure.highlight pre .perl .sub,*/ +/*figure.highlight pre .python .decorator,*/ +/*figure.highlight pre .python .title,*/ +/*figure.highlight pre .ruby .function .title,*/ +/*figure.highlight pre .ruby .title .keyword {*/ +/* color: var(--heo-blue);*/ +/*}*/ + +/*figure.highlight pre .javascript .function,*/ +/*figure.highlight pre .tag .attr {*/ +/* color: rgb(199, 146, 234);*/ +/*}*/ + +/*#article-container figure.highlight .line.marked {*/ +/* background-color: rgba(97, 97, 97, 0.314);*/ +/*}*/ + +/*#article-container figure.highlight table {*/ +/* display: block;*/ +/* overflow: auto;*/ +/* border: none;*/ +/*}*/ + +/*#article-container figure.highlight table td {*/ +/* padding: 0px;*/ +/* border: none;*/ +/*}*/ + +/*#article-container figure.highlight .gutter pre {*/ +/* padding-right: 0.5rem;*/ +/* padding-left: 0.5rem;*/ +/* background-color: var(--hlnumber-bg);*/ +/* color: var(--hlnumber-color);*/ +/* text-align: right;*/ +/*}*/ + +/*#article-container figure.highlight .code pre {*/ +/* padding-right: 0.5rem;*/ +/* padding-left: 0.5rem;*/ +/* width: 100%;*/ +/*}*/ + +/*#article-container figure.highlight,*/ +/*#article-container pre {*/ +/* overflow: auto;*/ +/* margin: 0px 0px 1rem;*/ +/* padding: 0px;*/ +/* background: var(--hl-bg);*/ +/* color: var(--hl-color);*/ +/* line-height: 1.6;*/ +/*}*/ + blockquote { margin: 0px 0px 1rem; padding: 0.1rem 0.8rem; @@ -940,6 +1074,118 @@ blockquote footer cite::before { content: "—"; } +/*#article-container code,*/ +/*#article-container pre {*/ +/* font-size: var(--global-font-size);*/ +/* font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important;*/ +/*}*/ + +/*#article-container code {*/ +/* padding: 0.1rem 0.2rem;*/ +/* background: rgba(27, 31, 35, 0.05);*/ +/* color: rgb(244, 116, 102);*/ +/*}*/ + +/*#article-container pre {*/ +/* padding: 10px 20px;*/ +/*}*/ + +/*#article-container pre code {*/ +/* padding: 0px;*/ +/* background: 0px 0px;*/ +/* color: var(--hl-color);*/ +/* text-shadow: none;*/ +/*}*/ + +/*#article-container figure.highlight {*/ +/* position: relative;*/ +/*}*/ + +/*#article-container figure.highlight pre {*/ +/* margin: 0px;*/ +/* padding: 8px 0px;*/ +/* border: none;*/ +/*}*/ + +/*#article-container figure.highlight .caption,*/ +/*#article-container figure.highlight figcaption {*/ +/* padding: 0.3rem 0px 0.1rem 0.7rem;*/ +/* font-size: var(--global-font-size);*/ +/* line-height: 1em;*/ +/*}*/ + +/*#article-container figure.highlight .caption a,*/ +/*#article-container figure.highlight figcaption a {*/ +/* float: right;*/ +/* padding-right: 10px;*/ +/* color: var(--hl-color);*/ +/*}*/ + +/*#article-container figure.highlight .caption a:hover,*/ +/*#article-container figure.highlight figcaption a:hover {*/ +/* border-bottom-color: var(--hl-color);*/ +/*}*/ + +/*#article-container .highlight-tools {*/ +/* position: relative;*/ +/* display: flex;*/ +/* -webkit-box-align: center;*/ +/* align-items: center;*/ +/* overflow: hidden;*/ +/* min-height: 1.2rem;*/ +/* height: 2.15em;*/ +/* background: var(--hltools-bg);*/ +/* color: var(--hltools-color);*/ +/* font-size: var(--global-font-size);*/ +/*}*/ + +/*#article-container .highlight-tools.closed + table {*/ +/* display: none;*/ +/*}*/ + +/*#article-container .highlight-tools .expand {*/ +/* position: absolute;*/ +/* padding: 0.4rem 0.7rem;*/ +/* cursor: pointer;*/ +/* transition: transform 0.3s ease 0s;*/ +/*}*/ + +/*#article-container .highlight-tools .expand + .code-lang {*/ +/* left: 1.7rem;*/ +/*}*/ + +/*#article-container .highlight-tools .expand.closed {*/ +/* transition: all 0.3s ease 0s;*/ +/* transform: rotate(-90deg) !important;*/ +/*}*/ + +/*#article-container .highlight-tools .code-lang {*/ +/* position: absolute;*/ +/* left: 0.7rem;*/ +/* text-transform: uppercase;*/ +/* font-weight: 700;*/ +/* font-size: 1.15em;*/ +/* user-select: none;*/ +/*}*/ + +/*#article-container .highlight-tools .copy-notice {*/ +/* position: absolute;*/ +/* right: 1.7rem;*/ +/* opacity: 0;*/ +/* transition: opacity 0.4s ease 0s;*/ +/*}*/ + +/*#article-container .highlight-tools .copy-button {*/ +/* position: absolute;*/ +/* right: 0.7rem;*/ +/* cursor: pointer;*/ +/* transition: color 0.2s ease 0s;*/ +/*}*/ + +/*#article-container .highlight-tools .copy-button:hover {*/ +/* color: rgb(48, 122, 246);*/ +/*}*/ + #article-container .gutter { user-select: none; } @@ -957,6 +1203,34 @@ blockquote footer cite::before { border: var(--style-border-always); } + +/*#article-container .code-expand-btn {*/ +/* position: absolute;*/ +/* bottom: 0px;*/ +/* z-index: 10;*/ +/* width: 100%;*/ +/* background: var(--hlexpand-bg);*/ +/* text-align: center;*/ +/* font-size: var(--global-font-size);*/ +/* cursor: pointer;*/ +/*}*/ + +/*#article-container .code-expand-btn i {*/ +/* padding: 0.3rem 0px;*/ +/* color: var(--hlnumber-color);*/ +/* animation: 1.2s ease 0s infinite normal none running code-expand-key;*/ +/*}*/ + +/*#article-container .code-expand-btn.expand-done {*/ +/* display: none !important;*/ +/*}*/ + +/*#article-container .code-expand-btn:not(.expand-done) ~ pre,*/ +/*#article-container .code-expand-btn:not(.expand-done) ~ table {*/ +/* overflow: hidden;*/ +/* height: 400px;*/ +/*}*/ + @-webkit-keyframes code-expand-key { 0% { opacity: 0.6; @@ -1085,7 +1359,7 @@ blockquote footer cite::before { } .article-sort-item-title { - color: var(--font-color); + color: var(--heo-fontcolor); font-size: 1.1em; transition: all 0.3s ease 0s; -webkit-line-clamp: 2; @@ -1140,7 +1414,7 @@ blockquote footer cite::before { } #page .category-lists .category-list a { - color: var(--font-color); + color: var(--heo-fontcolor); } #page .category-lists .category-list a:hover { @@ -1250,6 +1524,217 @@ blockquote footer cite::before { } } +.layout.hide-aside { + max-width: 1000px; +} + +@media screen and (min-width: 2000px) { + .layout.hide-aside { + max-width: 1300px; + } +} + +.layout.hide-aside > div { + width: 100% !important; +} + +.flink#article-container .flink-desc { + margin: 0.2rem 0px 0.5rem; +} + +.flink#article-container .flink-list { + overflow: auto; + padding: 10px 10px 0px; + text-align: center; +} + +.flink#article-container .flink-list > .flink-list-item { + position: relative; + float: left; + overflow: hidden; + margin: 15px 7px; + width: calc(25% - 12px); + height: 90px; + border-radius: 5px; + line-height: 17px; + transform: translateZ(0px); + transition: all 0.3s ease 0s; +} + +@media screen and (max-width: 1200px) { + .flink#article-container .flink-list > .flink-list-item { + width: calc(25% - 12px) !important; + } +} + +@media screen and (max-width: 1024px) { + .flink#article-container .flink-list > .flink-list-item { + width: calc(33.3333% - 12px) !important; + } +} + +@media screen and (max-width: 768px) { + .flink#article-container .flink-list > .flink-list-item { + width: calc(50% - 12px) !important; + } +} + +@media screen and (max-width: 600px) { + .flink#article-container .flink-list > .flink-list-item { + width: calc(100% - 12px) !important; + } +} + +.flink#article-container .flink-list > .flink-list-item:hover { + background: rgb(0, 108, 242); + transform: scale(1.05); +} + +.flink#article-container .flink-list > .flink-list-item a { + color: var(--heo-fontcolor); + text-decoration: none; +} + +.flink#article-container .flink-list > .flink-list-item a img { + float: left; + margin: 15px 10px; + width: 60px; + height: 60px; + border-radius: 35px; + transition: all 0.3s ease 0s; +} + +.flink#article-container .flink-list > .flink-list-item a .img-alt { + display: none; +} + +.flink#article-container .flink-list > .flink-list-item a .flink-item-name { + display: block; + padding: 16px 10px 0px 0px; + height: 40px; + font-weight: 700; + font-size: 1.43em; +} + +.flink#article-container .flink-list > .flink-list-item a .flink-item-desc { + display: block; + padding: 16px 10px 16px 0px; + height: 50px; + font-size: 0.93em; +} + +.flink#article-container .site-card-group { + display: flex; + flex-wrap: wrap; + -webkit-box-pack: start; + justify-content: flex-start; + margin: -8px; + -webkit-box-align: stretch; + align-items: stretch; +} + +.flink#article-container .site-card { + margin: 8px; + width: calc(20% - 16px); + display: block; + line-height: 1.4; + height: 100%; +} + +@media screen and (max-width: 1200px) { + .flink#article-container .site-card { + width: calc(20% - 16px) !important; + } +} + +@media screen and (max-width: 1024px) { + .flink#article-container .site-card { + width: calc(25% - 16px) !important; + } +} + +@media screen and (max-width: 768px) { + .flink#article-container .site-card { + width: calc(33.3333% - 16px) !important; + } +} + +@media screen and (max-width: 600px) { + .flink#article-container .site-card { + width: calc(50% - 16px) !important; + } +} + +.flink#article-container .site-card .img { + width: 100%; + height: 120px; + overflow: hidden; + border-radius: 12px 12px 0px 0px; + background: rgb(246, 246, 246); +} + +@media screen and (max-width: 500px) { + .flink#article-container .site-card .img { + height: 100px; + } +} + +.flink#article-container .site-card .img img { + width: 100%; + height: 100%; + transition: transform 2s ease 0s; + object-fit: cover; +} + +.flink#article-container .site-card .info { + margin-top: 8px; +} + +.flink#article-container .site-card .info img { + width: 32px; + height: 32px; + border-radius: 16px; + float: left; + margin-right: 8px; + margin-top: 2px; +} + +.flink#article-container .site-card .info span { + display: block; +} + +.flink#article-container .site-card .info .title { + font-weight: 600; + color: rgb(68, 68, 68); + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 1; + transition: all 0.3s ease 0s; +} + +.flink#article-container .site-card .info .desc { + overflow-wrap: break-word; + line-height: 1.2; + color: rgb(136, 136, 136); + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 2; +} + +.flink#article-container .site-card .img { + transition: all 0.3s ease 0s; +} + +.flink#article-container .site-card .img-alt { + display: none; +} + +.flink#article-container .site-card:hover .info .title { + color: rgb(255, 87, 34); +} + #recent-posts > .recent-post-item:not(:first-child) { margin-top: 1rem; } @@ -1281,7 +1766,7 @@ blockquote footer cite::before { transform: scale(1.1); } -#recent-posts > .recent-post-item .cover_radius { +#recent-posts > .recent-post-item .left_radius { border-radius: 5px 0px 0px 8px; } @@ -1298,7 +1783,7 @@ blockquote footer cite::before { overflow: hidden; width: 45%; height: 100%; - -webkit-mask-image: -webkit-radial-gradient(center center, rgb(255, 255, 255), rgb(0, 0, 0)); + -webkit-mask-image: -webkit-radial-gradient(center, rgb(255, 255, 255), rgb(0, 0, 0)); } #recent-posts > .recent-post-item .post_cover img.post_bg { @@ -1616,7 +2101,7 @@ blockquote footer cite::before { } #aside-content .card-info .card-info-data > .card-info-data-item a .headline { - color: var(--font-color); + color: var(--heo-fontcolor); font-size: 1em; } @@ -1632,7 +2117,7 @@ blockquote footer cite::before { #aside-content .card-info .card-info-social-icons .social-icon { margin: 0px 0.5rem; - color: var(--font-color); + color: var(--heo-fontcolor); font-size: 1.4em; cursor: pointer; } @@ -1754,7 +2239,7 @@ blockquote footer cite::before { #aside-content .aside-list > .aside-list-item .content > .comment, #aside-content .aside-list > .aside-list-item .content > .title { - color: var(--font-color); + color: var(--heo-fontcolor); font-size: 95%; line-height: 1.5; -webkit-line-clamp: 2; @@ -1781,7 +2266,7 @@ blockquote footer cite::before { display: inline-block; padding: 0.15rem 0.5rem; width: 100%; - color: var(--font-color); + color: var(--heo-fontcolor); transition: all 0.4s ease 0s; border-radius: 5px; } @@ -1944,6 +2429,21 @@ blockquote footer cite::before { animation: 1s ease 0s infinite normal none running more-btn-move; } +@media screen and (min-width: 900px) { + html.hide-aside .layout { + -webkit-box-pack: center; + justify-content: center; + } + + html.hide-aside .layout > .aside-content { + display: none; + } + + html.hide-aside .layout > div:first-child { + width: 80%; + } +} + .page .sticky_layout { display: flex; -webkit-box-orient: vertical; @@ -2279,7 +2779,7 @@ blockquote footer cite::before { } #page-header.not-top-img #nav a { - color: var(--font-color); + color: var(--heo-fontcolor); text-shadow: none; } @@ -2294,7 +2794,7 @@ blockquote footer cite::before { #page-header.nav-fixed #nav #site-name, #page-header.nav-fixed #nav #toggle-menu, #page-header.nav-fixed #nav a { - color: var(--font-color); + color: var(--heo-fontcolor); text-shadow: none; } @@ -2371,11 +2871,6 @@ blockquote footer cite::before { #post-info #post-meta { font-size: 90%; } - - #post-info #post-meta > .meta-firstline, - #post-info #post-meta > .meta-secondline { - display: inline; - } } #post-info #post-meta .post-meta-separator { @@ -3129,7 +3624,7 @@ ul { margin: 3px; width: calc(33.333% - 6px); height: 200px; - background: rgb(0, 0, 0); + background: var(--heo-main); vertical-align: bottom; } @@ -3257,6 +3752,48 @@ ul { color: rgb(133, 133, 133); } +#rightside #rightside-config-hide { + transition: transform 0.4s ease 0s; + transform: translate(35px, 0px); +} + +#rightside #rightside-config-hide.show { + transform: translate(0px, 0px) !important; +} + +#rightside > div > a, +#rightside > div > button { + display: block; + margin-bottom: 2px; + width: 30px; + height: 30px; + background-color: var(--btn-bg); + color: var(--btn-color); + text-align: center; + font-size: 16px; +} + +#rightside > div > a:hover, +#rightside > div > button:hover { + background-color: var(--btn-hover-color); +} + +#rightside #mobile-toc-button { + display: none; +} + +@media screen and (max-width: 900px) { + #rightside #mobile-toc-button { + display: block; + } +} + +@media screen and (max-width: 900px) { + #rightside #hide-aside-btn { + display: none; + } +} + #sidebar #menu-mask { position: fixed; z-index: 102; @@ -3276,12 +3813,39 @@ ul { height: 100%; background: var(--sidebar-bg); transition: all 0.5s ease 0s; + padding-top: 30px; + z-index: 1001; } #sidebar #sidebar-menus.open { transform: translate3d(-100%, 0px, 0px); } +#sidebar #sidebar-menus .back-menu-list-groups { + padding: 0 16px; +} + +#sidebar #sidebar-menus .back-menu-list-groups .back-menu-list-title { + font-size: 12px; + color: var(--heo-secondtext); +} + +#sidebar #sidebar-menus .back-menu-list-groups .back-menu-list { + width: calc(100% + 16px); + justify-content: flex-start; + margin: 0 -8px; +} + +#sidebar #sidebar-menus .back-menu-list-groups .back-menu-list .back-menu-item { + background: var(--heo-card-bg); + border: var(--style-border-always); + border-radius: 8px; +} + +#sidebar #sidebar-menus .back-home-button { + display: none; +} + #sidebar #sidebar-menus > .author-avatar { padding: 1.3rem 1.5rem 0px; text-align: center; @@ -3315,7 +3879,7 @@ ul { } #sidebar #sidebar-menus .site-data .data-item .data-item-link .headline { - color: var(--font-color); + color: var(--heo-fontcolor); } #sidebar #sidebar-menus hr { @@ -3323,31 +3887,30 @@ ul { } #sidebar #sidebar-menus .menus_items { - padding: 0px 0.5rem 2rem; + padding: 0 16px; } #sidebar #sidebar-menus .menus_items .site-page { position: relative; display: block; - padding: 0.3rem 1.5rem; - color: var(--font-color); + padding: 0; + color: var(--heo-fontcolor); font-size: 1.15em; cursor: pointer; -} - -#sidebar #sidebar-menus .menus_items .site-page i:first-child { - width: 25%; - text-align: left; -} - -#sidebar #sidebar-menus .menus_items .site-page span { - width: 75%; + font-size: 14px; + font-weight: bold; } #sidebar #sidebar-menus .menus_items .site-page span:hover { color: rgb(48, 122, 246); } +#sidebar #sidebar-menus .menus_item > .site-page { + display: flex; + font-size: 12px; + color: var(--heo-secondtext); +} + #sidebar #sidebar-menus .menus_items .expand { position: absolute; top: 0.78em; @@ -3362,6 +3925,89 @@ ul { #sidebar #sidebar-menus .menus_items .menus_item_child { margin: 0px; list-style: none; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +#sidebar #sidebar-menus .menus_item_child .site-page.child { + display: flex; + flex-direction: column; + align-items: center; + padding: 8px; + border-radius: 12px; + border: var(--style-border-always); + background: var(--heo-card-bg); +} + +#sidebar #sidebar-menus .menus_item_child li { + width: calc(50% - 8px); + margin: 4px; +} + +#sidebar #sidebar-menus .menus_item_child .site-page.child span { + line-height: 1; + margin-top: 8px; + font-size: 14px; +} + +#sidebar #sidebar-menus .card-tag-cloud { + padding: 0 16px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-bottom: 60px; +} + +#sidebar #sidebar-menus .card-tag-cloud a { + color: var(--heo-fontcolor) !important; + padding: 2px 8px 2px 12px; + margin: 4px; + border-radius: 8px; + border: var(--style-border-always); + background: var(--heo-card-bg); + font-size: 14px; +} + +#sidebar #sidebar-menus .card-tag-cloud a sup { + opacity: 0.6; + margin-left: 4px; +} + +#sidebar #sidebar-menus span.sidebar-menu-item-title { + font-size: 12px; + color: var(--heo-secondtext); + margin-left: 16px; +} + +#sidebar #sidebar-menus .sidebar-menu-item { + display: flex; + flex-direction: column; + padding: 0 16px; +} + +#sidebar #sidebar-menus .sidebar-menu-item a.menu-child { + width: 100%; + background: var(--heo-card-bg); + border-radius: 8px; + border: var(--style-border-always); + display: flex; + align-items: center; +} + +#sidebar #sidebar-menus .sidebar-menu-item a.menu-child i { + margin: 0 8px; +} + +#sidebar #sidebar-menus .webinfo { + padding: 0 16px; + display: flex; + white-space: nowrap; + flex-direction: column; +} + +#sidebar #sidebar-menus .webinfo .webinfo-item { + justify-content: space-between; } #vcomment, @@ -3456,6 +4102,9 @@ mjx-container[jax="CHTML"][display="true"] { padding-bottom: 0.3rem; } +.aplayer { +} + #article-container .aplayer { margin: 0px 0px 1rem; } @@ -3614,6 +4263,105 @@ mjx-container[jax="CHTML"][display="true"] { background: rgb(92, 184, 92); } +figure.gallery-group { + position: relative; + float: left; + overflow: hidden; + margin: 0.3rem 0.2rem; + width: calc(50% - 0.4rem); + height: 250px; + border-radius: 5px; + background: rgb(0, 0, 0); + transform: translate3d(0px, 0px, 0px); +} + +@media screen and (max-width: 600px) { + figure.gallery-group { + width: calc(100% - 0.4rem); + } +} + +figure.gallery-group:hover img { + opacity: 0.4; + transform: translate3d(0px, 0px, 0px); +} + +figure.gallery-group:hover .gallery-group-name::after { + transform: translate3d(0px, 0px, 0px); +} + +figure.gallery-group:hover p { + opacity: 1; + filter: none; + transform: translate3d(0px, 0px, 0px); +} + +figure.gallery-group img { + position: relative; + max-width: none; + width: calc(100% + 20px); + height: 250px; + backface-visibility: hidden; + opacity: 0.8; + transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; + transform: translate3d(-10px, 0px, 0px); + object-fit: cover; + margin: 0px !important; +} + +figure.gallery-group figcaption { + position: absolute; + top: 0px; + left: 0px; + padding: 1.5rem; + width: 100%; + height: 100%; + color: rgb(255, 255, 255); + text-transform: uppercase; + backface-visibility: hidden; +} + +figure.gallery-group figcaption > a { + position: absolute; + inset: 0px; + z-index: 1000; + opacity: 0; +} + +figure.gallery-group p { + margin: 0px; + padding: 0.4rem 0px 0px; + letter-spacing: 1px; + font-size: 1.1em; + line-height: 1.5; + opacity: 0; + transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; + transform: translate3d(100%, 0px, 0px); + -webkit-line-clamp: 4; +} + +figure.gallery-group .gallery-group-name { + position: relative; + margin: 0px; + padding: 0.4rem 0px; + font-weight: 700; + font-size: 1.65em; + line-height: 1.5; + -webkit-line-clamp: 2; +} + +figure.gallery-group .gallery-group-name::after { + position: absolute; + bottom: 0px; + left: 0px; + width: 100%; + height: 2px; + background: rgb(255, 255, 255); + content: ""; + transition: transform 0.35s ease 0s; + transform: translate3d(-100%, 0px, 0px); +} + .gallery-group-main { overflow: auto; padding: 0px 0px 0.8rem; @@ -3952,6 +4700,7 @@ blockquote.pullquote.right { .note table:last-child, .note ul:last-child { margin-bottom: 0px !important; + font-size: 14px !important; } .note:not(.no-icon) { @@ -3960,7 +4709,7 @@ blockquote.pullquote.right { .note:not(.no-icon)::before { position: absolute; - top: calc(50% - 0.8rem); + top: calc(50% - 15px); left: 0.7rem; font-size: larger; } @@ -4210,7 +4959,7 @@ blockquote.pullquote.right { } #article-container .tabs > .nav-tabs > .tab { - margin: 0px; + margin: 4px; padding: 0px; list-style: none; } @@ -4222,17 +4971,6 @@ blockquote.pullquote.right { } } -#article-container .tabs > .nav-tabs > .tab button { - display: block; - padding: 0.5rem 1rem; - width: 100%; - border-top: 2px solid var(--tab-border-color); - background: var(--tab-botton-bg); - color: var(--tab-botton-color); - line-height: 2; - transition: all 0.4s ease 0s; -} - #article-container .tabs > .nav-tabs > .tab button i { width: 1.5em; } @@ -4252,6 +4990,8 @@ blockquote.pullquote.right { position: relative; display: none; padding: 1.8rem 1.2rem; + background: var(--heo-background); + border: var(--style-border-always); } @media screen and (max-width: 768px) { @@ -4268,7 +5008,7 @@ blockquote.pullquote.right { #article-container .tabs .tab-to-top { position: relative; display: block; - margin: 0px 0px 0px auto; + margin: 16px 0px 0px auto; color: rgb(153, 169, 191); } @@ -4340,6 +5080,22 @@ blockquote.pullquote.right { content: ""; } +[data-theme="dark"] #article-container pre > code { + background: rgb(23, 23, 23); +} + +[data-theme="dark"] #article-container figure.highlight { + box-shadow: none; +} + +[data-theme="dark"] #article-container .note code { + background: rgba(27, 31, 35, 0.05); +} + +[data-theme="dark"] #article-container .aplayer { + filter: brightness(0.8); +} + [data-theme="dark"] #article-container kbd { border-color: rgb(105, 105, 105); background-color: rgb(82, 82, 82); @@ -4555,44 +5311,39 @@ blockquote.pullquote.right { height: 1.5rem; } -:root { - --heo-main: var(--heo-theme) !important; -} -:root { - --heo-main-op: var(--heo-theme-op) !important; -} +/* 全局 +---------------------------------------------------------------- */ -:root { - --heo-main-none: var(--heo-theme-none) !important; -} - -:root { - --heo-snackbar-time: 3000ms !important; -} +/* 深色模式图片 */ +/* [data-theme=dark] img{ + filter: brightness(.9); +} */ +/* 最小网页大小 */ #page { min-height: calc(100vh - 464px); } -::-webkit-scrollbar { +/* 滚动条 */ +*::-webkit-scrollbar { width: 6px; height: 6px; } -::-webkit-scrollbar-thumb { +*::-webkit-scrollbar-thumb { background: var(--heo-scrollbar); border-radius: 8px; cursor: pointer; } -::-webkit-scrollbar-thumb:hover { +*::-webkit-scrollbar-thumb:hover { background: var(--heo-main); opacity: 1; display: block !important; } -::-webkit-scrollbar-track { +*::-webkit-scrollbar-track { background-color: var(--heo-none); } @@ -4600,23 +5351,31 @@ html { overflow-y: overlay; } +/* 网页最大宽度 */ +.layout.hide-aside { + max-width: 1400px; +} + +/* 深色模式图片 */ [data-theme="dark"] img { filter: brightness(1); } +/* 导航栏中的样式 */ #nav { flex-wrap: nowrap; justify-content: space-between; } #nav .menus_items .menus_item .menus_item_child { - padding: 6px 4px 8px; + padding: 6px 4px 8px 4px; border-radius: 100px; background-color: var(--heo-card-bg); box-shadow: var(--heo-shadow-black); border: var(--style-border); - transition: all 0.3s ease 0s; + transition: 0.3s; backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); top: 35px; } @@ -4630,10 +5389,6 @@ html { box-shadow: none; } -#sidebar #sidebar-menus .menus_items .menus_item_child { - margin-left: 1rem; -} - #sidebar #sidebar-menus .menus_items .site-page span:hover { color: var(--heo-fontcolor); } @@ -4644,6 +5399,7 @@ html { .fa, .fa-brands, +.fas, .fa-light, .fa-regular, .fa-solid, @@ -4658,17 +5414,33 @@ html { line-height: 1; } -#nav .menus_items .menus_item .menus_item_child::before { +#nav .menus_items .menus_item .menus_item_child:before { top: -10px; } +/* #menus > div.menus_items > div:nth-child(1) > ul{ + right: -200px!important; +} + +#menus > div.menus_items > div:nth-child(2) > ul{ + right: -250px!important; +} + +#menus > div.menus_items > div:nth-child(3) > ul{ + right: -140px!important; +} + +#menus > div.menus_items > div:nth-child(4) > ul{ + right: -200px!important; +} */ + #nav .menus_items .menus_item .menus_item_child li a:hover { - box-shadow: var(--heo-shadow-main); - margin: 0px auto; - padding: 0.3rem 0.7rem; background: var(--heo-main) !important; color: var(--heo-white) !important; + box-shadow: var(--heo-shadow-main); + margin: 0 auto; transform: scale(1) !important; + padding: 0.3rem 0.7rem; } #nav .menus_items .menus_item .menus_item_child li a i:not(.fa-brands) { @@ -4677,7 +5449,7 @@ html { } #nav .menus_items .menus_item { - padding: 0px 0.4rem; + padding: 0 0.4rem; display: flex; flex-direction: column; align-items: center; @@ -4688,9 +5460,10 @@ html { display: inline-flex; list-style: none; border-radius: 5px; - margin: 0px 4px; + margin: 0 4px; } +/* 导航栏按钮悬浮 */ #nav a { border-radius: 8px; color: var(--heo-white); @@ -4698,22 +5471,22 @@ html { .nav-fixed #nav a { color: var(--heo-fontcolor); - transition: all 0.3s ease 0s; + transition: 0.3s; } #assist-open a { - padding: 0px; + padding: 0; pointer-events: none; } #assist-open { - transition: all 0.3s ease 0s; + transition: 0.3s; border-radius: 40px; } #assist-open:hover { - background: var(--heo-white-op); color: var(--heo-white) !important; + background: var(--heo-white-op); } #page-header.nav-fixed #assist-open:hover { @@ -4730,9 +5503,10 @@ html { } .topbar-html { - background: rgb(174, 174, 174) !important; + background: #aeaeae !important; } +/* 无障碍 */ @media screen and (max-width: 768px) { #assist-open { display: none; @@ -4745,9 +5519,9 @@ html { } .topbar-html-content { + height: 160px !important; align-items: flex-end; padding-bottom: 12px; - height: 160px !important; } .topbar-html { @@ -4764,11 +5538,14 @@ html { border-radius: 12px !important; } + +/* 导航栏禁止隐藏 */ #page-header.nav-fixed #nav { - top: 0px; + top: 0; box-shadow: none; border-bottom: var(--style-border); backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); background: var(--heo-background); } @@ -4776,19 +5553,22 @@ html { padding: 0px; } +#page-header #nav { + box-shadow: none; + transition: 0s; + display: flex; + justify-content: center; + z-index: 1000 !important; +} + @media screen and (max-width: 768px) { #nav { padding: 0px; } -} -#page-header #nav { - box-shadow: none; - transition: all 0s ease 0s; - display: flex; - justify-content: center; - background: linear-gradient(to top, var(--heo-main-none) 0, var(--heo-main) 100%); - z-index: 1000 !important; + #page-header #nav { + background: linear-gradient(to top, var(--heo-main-none) 0%, var(--heo-main) 100%); + } } #page-header #nav #nav-group { @@ -4796,13 +5576,13 @@ html { width: 100%; display: flex; position: relative; - padding: 0px 1.5rem; + padding: 0 1.5rem; align-items: center; } #page-header #nav #nav-right { position: absolute; - right: 0px; + right: 0; z-index: 102; display: flex; flex-direction: row; @@ -4832,8 +5612,8 @@ html { cursor: pointer; } -#page-header #nav #nav-left .nav-button a, -#page-header #nav #nav-right .nav-button a { +#page-header #nav #nav-right .nav-button a, +#page-header #nav #nav-left .nav-button a { height: 35px; width: 35px; display: flex; @@ -4842,17 +5622,18 @@ html { border-radius: 40px; } -#page-header #nav #nav-left .nav-button a i, -#page-header #nav #nav-right .nav-button a i { +#page-header #nav #nav-right .nav-button a i, +#page-header #nav #nav-left .nav-button a i { line-height: 1; } -#page-header #nav #nav-left div, -#page-header #nav #nav-right div { +#page-header #nav #nav-right div, +#page-header #nav #nav-left div { margin-left: 0.5rem; - padding: 0px; + padding: 0; } + @media screen and (max-width: 768px) { #nav #menus { display: none !important; @@ -4870,7 +5651,7 @@ html { width: 100%; display: flex; position: relative; - padding: 0px 12px; + padding: 0 12px; } #page-header #nav #nav-right { @@ -4879,17 +5660,19 @@ html { } #nav.show { - top: 0px; - transition: all 0.2s ease 0s; + transform: translate3d(0px, 0px, 0px) !important; + top: 0; + transition: 0.2s; position: fixed; z-index: 91; - transform: translate3d(0px, 0px, 0px) !important; } + #page-header.not-top-img #nav { - transition: all 0.3s ease 0s; + transition: 0.3s; background: var(--heo-maskbgdeep); backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); } @media screen and (max-width: 768px) { @@ -4911,21 +5694,22 @@ html { } #page-header.nav-fixed #nav #menus > div.menus_items { - transition: all 0.3s ease 0s; + transition: 0.3s; height: 40px; - margin: auto 0px; + margin: auto 0; } #page-header.not-top-img { - margin-bottom: 0px; + margin-bottom: 0rem; } #nav #toggle-menu { - padding: 0px 0.4rem; + padding: 0 0.4rem; } +/* 无顶图时导航栏间距 */ #page-header.no-top-img { - margin-bottom: 0px; + margin-bottom: 0rem; } .layout { @@ -4940,9 +5724,10 @@ html { } } +/* 导航栏logo */ #site-name .iconfont { font-size: 20px; - font-weight: 400; + font-weight: normal; line-height: 48px; } @@ -4954,13 +5739,16 @@ html { transform: scale(1.03); } +/* 返回顶部 */ + #nav-totop { position: relative; width: 35px; height: 35px; + transition: 0.3s; display: flex; border-radius: 40px; - transition: all 0.3s ease-in-out 0s; + transition: all 0.3s ease-in-out; align-items: center; } @@ -4969,7 +5757,7 @@ html { } #nav-totop .totopbtn { - padding-top: 0px; + padding-top: 0; } #nav-totop .totopbtn i { @@ -4982,7 +5770,7 @@ html { #nav-totop:hover .totopbtn i { opacity: 1; color: var(--heo-white); - transition: all 0.3s ease 0s; + transition: 0.3s; } #nav-totop #percent { @@ -4991,7 +5779,7 @@ html { display: flex; justify-content: center; align-items: center; - transition: all 0.3s ease 0s; + transition: 0.3s; white-space: nowrap; } @@ -5002,37 +5790,38 @@ html { display: flex; justify-content: center; align-items: center; - transition: all 0.3s ease 0s; + transition: 0.3s; white-space: nowrap; } #page-header:not(.nav-fixed) #percent { - transition: all 0.3s ease 0s; + transition: 0.3s; } #page-header:not(.nav-fixed) #nav-totop { - width: 0px; + width: 0; transform: scale(0); + transition: 0.3s; + margin-left: 0 !important; overflow: hidden; - transition: all 0.3s ease-in 0s; - margin-left: 0px !important; + transition: 0.3s ease-in; } #nav-totop:hover #percent { opacity: 0; - font-weight: 700; + font-weight: bold; } #page-header #nav #nav-right .nav-button a.totopbtn { width: 25px; height: 25px; border-radius: 40px; - background: var(--font-color); + background: var(--heo-fontcolor); color: var(--card-bg); position: absolute; top: 5px; right: 5px; - transition: all 0.3s ease 0s; + transition: 0.3s; } #page-header #nav #nav-right .nav-button.long a.totopbtn { @@ -5046,27 +5835,35 @@ html { #page-header #nav #nav-right .nav-button:not(.long):hover a.totopbtn { width: 35px; height: 35px; - top: 0px; - right: 0px; + top: 0; + right: 0; } +/* 导航栏图标 */ #nav #site-name i { font-size: 50px; line-height: 35px; - padding: 0px 12px; + padding: 0 12px; } .back-home-button { display: flex; width: 35px; height: 35px; + padding: 0 !important; align-items: center; justify-content: center; margin-right: 4px; - transition: all 0.3s ease 0s; + transition: 0.3s; + border-radius: 8px; color: var(--heo-white); border-radius: 40px; - padding: 0px !important; +} + +@media screen and (max-width: 768px) { + .back-home-button { + display: none; + } } .nav-fixed #nav .back-home-button { @@ -5082,50 +5879,51 @@ html { color: var(--heo-white) !important; } -.back-home-button .back-menu-list { +.back-menu-list-groups .back-menu-list { display: flex; - flex-flow: row wrap; + flex-direction: row; + flex-wrap: wrap; width: 340px; justify-content: space-between; } -.back-home-button .back-menu-list::before { +.back-menu-list-groups .back-menu-list::before { position: absolute; top: -15px; - left: 0px; + left: 0; width: 100%; height: 20px; - content: ""; + content: ''; } -.back-home-button .back-menu-list .back-menu-item { +.back-menu-list-groups .back-menu-list .back-menu-item { display: flex; align-items: center; margin: 4px 8px; - transition: all 0.3s ease 0s; - border-radius: 8px; padding: 4px 8px !important; + transition: 0.3s; + border-radius: 8px; } -.back-home-button .back-menu-list .back-menu-item:hover { +.back-menu-list-groups .back-menu-list .back-menu-item:hover { background: var(--heo-main) !important; transform: scale(1) !important; } -.back-home-button .back-menu-list .back-menu-item .back-menu-item-icon { +.back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-icon { width: 24px; height: 24px; border-radius: 8px; background: var(--heo-none); } -.back-home-button .back-menu-list .back-menu-item .back-menu-item-text { +.back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-text { font-size: var(--global-font-size); margin-left: 0.5rem; color: var(--heo-fontcolor); } -.back-home-button .back-menu-list .back-menu-item:hover .back-menu-item-text { +.back-menu-list-groups .back-menu-list .back-menu-item:hover .back-menu-item-text { color: var(--heo-white); } @@ -5145,7 +5943,7 @@ html { font-size: 12px; color: var(--heo-secondtext); box-shadow: var(--heo-shadow-border); - transition: all 0s ease 0s; + transition: 0s; opacity: 0; pointer-events: none; } @@ -5155,8 +5953,8 @@ html { } .back-home-button .back-menu-list-group .back-menu-list-title { - margin: 8px 0px 0px 16px; - transition: all 0.3s ease 0s; + margin: 8px 0 0 16px; + transition: 0.3s; } .back-home-button .back-menu-list-group:hover .back-menu-list-title { @@ -5166,7 +5964,7 @@ html { .back-home-button:hover .back-menu-list-groups { display: flex; opacity: 1; - transition: all 0.3s ease 0s; + transition: 0.3s; top: 55px; pointer-events: auto; left: 1.5rem; @@ -5177,14 +5975,15 @@ html { } @media screen and (max-width: 768px) { + .back-home-button .back-menu-list-groups { - left: 0px; + left: 0; } .back-home-button:hover .back-menu-list-groups { padding-bottom: 8px; box-shadow: var(--heo-shadow-border); - left: 0px; + left: 0; } } @@ -5194,38 +5993,39 @@ html { display: flex; align-items: center; z-index: 102; - transition: all 0.3s ease 0s; + transition: 0.3s; } +/* 导航栏文字 */ @media screen and (min-width: 900px) { #nav #site-name { opacity: 1; - transition: all 0.3s ease 0s; + transition: 0.3s; overflow: hidden; } #nav #site-name i { - transition: all 0.3s ease 0s; + transition: 0.3s; } #nav #site-name:hover i { opacity: 0; - transition: all 0.3s ease 0s; + transition: 0.3s; } #page-header.nav-fixed #nav #site-name { opacity: 1; - transition: all 0.1s ease 0s; + transition: 0.1s; border-radius: 40px; } #page-header.nav-visible #nav #site-name { opacity: 1; - transition: all 0.1s ease 0s; + transition: 0.1s; } - #nav #site-name::after { - background: url(../images/home.webp) 50% 50% no-repeat; + #nav #site-name:after { + background: url(../images/home.webp) no-repeat 50% 50%; opacity: 0; position: absolute; display: flex; @@ -5233,7 +6033,8 @@ html { width: 74px; height: 58px; content: ""; - transition: all 0s ease-in 0s; + transition: 0s; + transition-timing-function: ease-in; transform: scale(0.4); } @@ -5245,7 +6046,7 @@ html { background: var(--heo-main); } - #nav #site-name:hover::after { + #nav #site-name:hover:after { opacity: 1; transform: translateY(0px) scale(0.3); transition-timing-function: ease-in; @@ -5257,53 +6058,54 @@ html { #nav #page-name-text { display: inline; - font-weight: 700; + font-weight: bold; padding: 4px 8px; opacity: 0; - transition: all 0.1s ease 0s; + transition: 0.1s; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; text-align: center; cursor: pointer; - top: 0px; + top: 0; font-size: 0.9rem; animation-timing-function: ease-in; + -webkit-animation-timing-function: ease-in; } #nav #page-name-text:hover { + color: var(--heo-main) !important; background: var(--heo-none); box-shadow: none; - color: var(--heo-main) !important; } #page-header.nav-fixed #nav #page-name-text { display: inline; opacity: 1; - transition: all 0.3s ease 0s; + transition: 0.3s; line-height: 1; } - #page-header.nav-fixed #nav #page-name-text:hover::after { + #page-header.nav-fixed #nav #page-name-text:hover:after { opacity: 1; line-height: 36px; } #page-header.nav-fixed #nav div.menus_items { - transition: all 0.15s ease 0s; + transition: 0.15s; position: relative; top: -60px; } #page-header.nav-fixed.nav-visible #nav #page-name-text { display: inline; - transition: all 0.15s ease 0s; + transition: 0.15s; } #page-header.nav-fixed.nav-visible #nav div.menus_items { opacity: 1; - transition: all 0.15s ease 0s; + transition: 0.15s; position: relative; top: 0px; } @@ -5320,6 +6122,7 @@ html { margin: auto; justify-content: center; animation-timing-function: ease-out; + -webkit-animation-timing-function: ease-out; } #page-header.nav-fixed #nav #menus { @@ -5332,14 +6135,14 @@ html { #page-header.nav-fixed #page-name { z-index: 101; - transition: all 0.3s ease 0s; + transition: 0.3s; top: 10px; } #page-header.nav-fixed.nav-visible #page-name { z-index: 100; top: 62px; - transition: all 0.3s ease 0s; + transition: 0.3s; } #page-name-mask { @@ -5347,7 +6150,7 @@ html { height: 100%; position: absolute; overflow: hidden; - left: 0px; + left: 0; } } @@ -5357,6 +6160,7 @@ html { } } +/* 导航栏音乐 */ @media screen and (max-width: 1300px) { #nav-music { display: none !important; @@ -5371,7 +6175,7 @@ html { bottom: 20px; left: 20px; cursor: pointer; - transition: all 0.3s ease 0s; + transition: 0.3s; transform-origin: left bottom; box-shadow: var(--heo-shadow-border); border-radius: 40px; @@ -5382,21 +6186,21 @@ html { } #nav-music.playing { - box-shadow: 0 0 12px -3px var(--heo-none); - animation: 5s linear 0s infinite normal none running playingShadow; + box-shadow: 0 0px 12px -3px var(--heo-none); + -webkit-animation: playingShadow 5s linear infinite; } @-webkit-keyframes playingShadow { 0% { - box-shadow: 0 0 12px -3px var(--heo-none); + box-shadow: 0 0px 12px -3px var(--heo-none); } 50% { - box-shadow: 0 0 12px 0 var(--heo-main); + box-shadow: 0 0px 12px 0px var(--heo-main); } 100% { - box-shadow: 0 0 12px -3px var(--heo-none); + box-shadow: 0 0px 12px -3px var(--heo-none); } } @@ -5405,51 +6209,53 @@ html { width: 25px; border-radius: 40px; z-index: 1; - transition: all 0.3s ease 0s; - transform: rotate(0deg) scale(1); + transition: 0.3s; + -webkit-transform: rotate(0deg) scale(1); border: var(--style-border-always); - animation: 24s linear 0s infinite normal none paused changeright; + -webkit-animation: changeright 24s linear infinite; + animation-play-state: paused; } #nav-music.playing .aplayer.aplayer-withlrc .aplayer-pic { - box-shadow: rgba(255, 255, 255, 0.65) 0px 0px 14px; - transform: rotate(0deg) scale(1.1); + box-shadow: 0 0 14px #ffffffa6; + -webkit-transform: rotate(0deg) scale(1.1); border-color: var(--heo-white); animation-play-state: running; } @-webkit-keyframes changeright { + 0% { - transform: rotate(0deg) scale(1.1); - box-shadow: rgba(255, 255, 255, 0) 0px 0px 2px; + -webkit-transform: rotate(0deg) scale(1.1); + box-shadow: 0 0 2px #ffffff00; } 25% { - transform: rotate(90deg) scale(1.1); - box-shadow: rgb(255, 255, 255) 0px 0px 14px; + -webkit-transform: rotate(90deg) scale(1.1); + box-shadow: 0 0 14px #ffffff; } 50% { - transform: rotate(180deg) scale(1.1); - box-shadow: rgba(255, 255, 255, 0) 0px 0px 2px; + -webkit-transform: rotate(180deg) scale(1.1); + box-shadow: 0 0 2px #ffffff00; } 75% { - transform: rotate(270deg) scale(1.1); - box-shadow: rgb(255, 255, 255) 0px 0px 14px; + -webkit-transform: rotate(270deg) scale(1.1); + box-shadow: 0 0 14px #ffffff; } 100% { - transform: rotate(360deg) scale(1.1); - box-shadow: rgba(255, 255, 255, 0) 0px 0px 2px; + -webkit-transform: rotate(360deg) scale(1.1); + box-shadow: 0 0 2px #ffffff00; } } #nav-music .aplayer.aplayer-withlrc .aplayer-info { height: 100%; - color: var(--font-color); + color: var(--heo-fontcolor); margin-left: 8px; - padding: 0px; + padding: 0; display: flex; align-items: center; } @@ -5464,17 +6270,18 @@ html { width: 100%; height: 100%; position: absolute; - top: 0px; - left: 0px; + top: 0; + left: 0; align-items: center; justify-content: center; display: flex; border-radius: 40px; opacity: 0; font-size: 12px; + transition: 0s; z-index: 2; pointer-events: none; - transition: all 0.3s ease 0s; + transition: 0.3s; } #nav-music:hover:not(.playing) #nav-music-hoverTips { @@ -5490,9 +6297,9 @@ html { border-radius: 60px; height: 41px; display: flex; - margin: 0px; + margin: 0; pointer-events: none; - transition: all 0.3s ease 0s; + transition: 0.3s; border: var(--style-border); box-shadow: none; } @@ -5501,6 +6308,7 @@ html { background: var(--heo-main-op-deep); border: var(--style-border-hover); backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); } #nav-music .aplayer .aplayer-notice { @@ -5515,7 +6323,8 @@ html { position: relative; display: flex; align-items: center; - padding: 0px 12px 0px 8px; + padding: 0 8px; + padding-right: 12px; } #nav-music .aplayer .aplayer-pic .aplayer-play { @@ -5527,10 +6336,10 @@ html { } #nav-music .aplayer .aplayer-info .aplayer-music { - margin: 0px; + margin: 0; display: flex; align-items: center; - padding: 0px; + padding: 0; z-index: 1; } @@ -5558,25 +6367,25 @@ html { max-width: 120px; overflow: hidden; text-overflow: ellipsis; - transition: all 0.3s ease 0s; + transition: 0.3s; } #nav-music .aplayer .aplayer-info .aplayer-controller { position: absolute; width: 100%; height: 100%; - top: 0px; - left: 0px; + top: 0; + left: 0; } #nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap { - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; } #nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar { height: 100%; - background: 0px 0px; + background: none; } #nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded { @@ -5586,11 +6395,12 @@ html { #nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played { height: 100%; opacity: 0.1; - animation: 5s ease 0s infinite normal none running lightBar; background-color: var(--heo-white) !important; + -webkit-animation: lightBar 5s ease infinite; } @-webkit-keyframes lightBar { + 0% { opacity: 0.1; } @@ -5604,17 +6414,19 @@ html { } } + +/* 歌词 */ #nav-music .aplayer.aplayer-withlrc .aplayer-lrc { - width: 0px; + width: 0; opacity: 0; - transition: all 0.3s ease 0s; + transition: 0.3s; margin-left: 8px; margin-top: -2px; } #nav-music.playing .aplayer.aplayer-withlrc .aplayer-lrc { width: 200px; - margin-bottom: 0px; + margin-bottom: 0; opacity: 1; } @@ -5623,36 +6435,45 @@ html { border: none; } -#nav-music .aplayer .aplayer-lrc::after, -#nav-music .aplayer .aplayer-lrc::before { +#nav-music .aplayer .aplayer-lrc:after, +#nav-music .aplayer .aplayer-lrc:before { display: none; } #nav-music .aplayer .aplayer-lrc p { - color: rgba(255, 255, 255, 0.7); + color: #ffffffb3; } +/* 导航栏隐藏文字 */ +/* #menus > div.menus_items > div > a > span{ + display: none; +} */ + + +/* 品牌图标放大 */ i.fab { font-size: 20px; vertical-align: middle; margin-bottom: 4px; } -#body-wrap .full_page::before { +/* 去除header背景 */ +#body-wrap .full_page:before { background-color: var(--heo-none) !important; - transition: all 0s ease 0s !important; + transition: 0ms !important; } -.full_page #page-header::before { +.full_page #page-header:before { display: none !important; } +/* 消息弹窗 */ .snackbar-container { - display: flex; - justify-content: center; background: var(--heo-main) !important; color: var(--heo-white) !important; - border-radius: 0px !important; + border-radius: 0 !important; + display: flex; + justify-content: center !important; max-width: none !important; min-width: 100% !important; margin: 0px !important; @@ -5662,20 +6483,19 @@ i.fab { } .snackbar-container p { - font-weight: 700 !important; + font-weight: bold !important; text-align: center !important; font-size: 0.8rem !important; display: flex !important; justify-content: center !important; - margin: auto !important; } .snackbar-container .action { - font-weight: 700; - transition: all 0.3s ease 0s; color: var(--heo-white) !important; padding: 4px 6px !important; + font-weight: bold; border-radius: 8px !important; + transition: 0.3s; border: var(--style-border) !important; } @@ -5686,10 +6506,10 @@ i.fab { .snackbar-container::after { position: absolute; - width: 0px; + width: 0; height: 100%; - left: 0px; - top: 0px; + left: 0; + top: 0; background: var(--heo-white); opacity: 0.1; content: ""; @@ -5698,50 +6518,51 @@ i.fab { } @keyframes snackbar-progress { - 0% { - width: 0px; + from { + width: 0; } - 100% { + to { width: 100%; } } +/* 导航栏按钮 */ #nav a { - transition: all 0.3s ease 0s; + transition: 0.3s; } #nav a:hover { - background: var(--heo-white-op); - transition: all 0.3s ease 0s; color: var(--heo-white) !important; + background: var(--heo-white-op); + transition: 0.3s; } .page #nav a:hover { - background: var(--heo-main); - transition: all 0.3s ease 0s; - box-shadow: var(--heo-shadow-main); color: var(--heo-white) !important; + background: var(--heo-main); + transition: 0.3s; + box-shadow: var(--heo-shadow-main); } .nav-fixed #nav a:hover { background: var(--heo-main); - transition: all 0.3s ease 0s; + transition: 0.3s; } @media screen and (min-width: 768px) { .menus_item:hover > a.site-page { - background: var(--heo-white-op); - transition: all 0.3s ease 0s; - box-shadow: var(--heo-shadow-main); color: var(--heo-white) !important; + background: var(--heo-white-op); + transition: 0.3s; + box-shadow: var(--heo-shadow-main); } .page .menus_item:hover > a.site-page { - background: var(--heo-main); - transition: all 0.3s ease 0s; - box-shadow: var(--heo-shadow-main); color: var(--heo-white) !important; + background: var(--heo-main); + transition: 0.3s; + box-shadow: var(--heo-shadow-main); } .nav-fixed .menus_item:hover > a.site-page { @@ -5758,35 +6579,37 @@ i.fab { #sidebar #sidebar-menus .menus_items li .site-page span:hover { color: var(--heo-white); } - - #sidebar #sidebar-menus { - z-index: 1001; - } } + .nav-fixed #nav #site-name i { color: var(--heo-fontcolor); - transition: all 0.3s ease 0s; + transition: 0.3s; } #nav #site-name:hover i { color: var(--heo-white); } + +/* 搜索背景模糊 */ #search-mask { backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); background: var(--heo-maskbg); } +/* 搜索输入框 */ #algolia-search .search-dialog .ais-search-box input { - border: var(--style-border); border-radius: 8px !important; + border: var(--style-border); } #algolia-search .search-dialog .ais-search-box input:focus { border: var(--style-border-hover); } + #algolia-search .search-dialog .ais-search-box input::placeholder { opacity: 0.6; } @@ -5795,12 +6618,13 @@ i.fab { margin-bottom: 8px; } +/* 搜索窗口 */ .search-dialog { + border-radius: 12px !important; box-shadow: var(--heo-shadow-lightblack); background: var(--heo-card-bg); border: var(--style-border); - transition: all 0.3s ease 0s; - border-radius: 12px !important; + transition: 0.3s; } .search-dialog:hover { @@ -5809,7 +6633,7 @@ i.fab { } .search-dialog__title { - font-weight: 700; + font-weight: bold; color: var(--heo-main); } @@ -5821,10 +6645,11 @@ i.fab { display: none; } +/* 搜索提示文字 */ #algolia-tips { padding-top: 12px; color: var(--heo-secondtext); - right: 0px; + right: 0; margin: auto; } @@ -5832,21 +6657,22 @@ i.fab { margin-left: 0.4rem; } +/* 搜索结果间距 */ #algolia-search-results { padding-top: 8px; } -#algolia-search .search-dialog .ais-hits--item.algolia-hit-item::before { +#algolia-search .search-dialog .ais-hits--item.algolia-hit-item:before { display: none; } #algolia-search .search-dialog .ais-hits--item.algolia-hit-item { - padding-left: 0px; - font-weight: 700; + padding-left: 0rem; + font-weight: bold; } #algolia-search .search-dialog .ais-pagination.pagination { - margin: 0.2rem 0px 0px; + margin: 0.2rem 0 0; } #algolia-search .search-dialog .ais-hits--item.algolia-hit-item em { @@ -5854,16 +6680,19 @@ i.fab { font-style: normal; } +/* 搜索框间距 */ #algolia-search .search-dialog .ais-search-box { padding-top: 8px; } +/* 搜索页码样式 */ #algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item.current a { border-radius: 4px; background: var(--heo-main); color: var(--heo-white); } +/* 全局超链接 */ a { color: var(--heo-fontcolor); } @@ -5872,10 +6701,12 @@ a:hover { color: var(--heo-hovertext); } +/* 分割线 */ hr { display: none; } +/* footer样式 */ #footer-wrap { color: var(--heo-fontcolor); } @@ -5898,11 +6729,12 @@ div#footer_deal { align-items: center; } +/* 古诗词卡片 */ #card-poem { display: flex; flex-direction: column; - min-height: 130px; padding: 0.5rem !important; + min-height: 130px; } div#poem_sentence { @@ -5944,7 +6776,8 @@ div#poem_dynasty { } div#footer_deal { - flex-flow: row wrap; + flex-wrap: wrap; + flex-direction: row; } } @@ -5955,10 +6788,10 @@ a.deal_link { border-radius: 3rem; width: 32px; height: 32px; - background: var(--font-color); + background: var(--heo-fontcolor); justify-content: center; align-items: center; - transition: all 0.3s ease 0s; + transition: 0.3s; } a.deal_link:hover { @@ -5969,14 +6802,14 @@ a.deal_link:hover { img.footer_mini_logo { width: 50px; height: 50px; - margin: 0px 1rem; + margin: 0 1rem; cursor: pointer; - transition: all 0.5s cubic-bezier(0, 0, 0, 1.29) 0s; + transition: cubic-bezier(0, 0, 0, 1.29) 0.5s; } img.footer_mini_logo:hover { - backface-visibility: hidden; - transform-style: preserve-3d; + -webkit-backface-visibility: hidden; + -webkit-transform-style: preserve-3d; } @media screen and (min-width: 1300px) { @@ -5989,6 +6822,7 @@ img.footer_mini_logo:hover { } } +/* logo居中 */ #weblogo { align-self: center; } @@ -5998,21 +6832,22 @@ img.footer_mini_logo:hover { } .heoblog_footerlogo_img { - filter: drop-shadow(rgba(238, 125, 121, 0.21) 0px 12px 12px); + filter: drop-shadow(0 12px 12px #ee7d7936); } .heoblog_footerlogo_img:hover { transform: scale(1.03); } +/* 导航栏居中 */ #nav #menus { display: flex; justify-content: center; width: 100%; position: absolute; height: 60px; - left: 0px; - margin: 0px; + left: 0; + margin: 0; } #nav .menus_items { @@ -6030,22 +6865,22 @@ img.footer_mini_logo:hover { #menus > div.menus_items > div > a { letter-spacing: 0.3rem; padding-left: 0.7rem; - font-weight: 700; - padding-top: 0px; - padding-bottom: 0px; + font-weight: bold; + padding-top: 0; + padding-bottom: 0; height: 35px; line-height: 35px; border-radius: 40px; } #nav .menus_items .menus_item .menus_item_child li a { - letter-spacing: 0px; + letter-spacing: 0rem; display: flex; align-items: center; border-radius: 100px; padding: 0.3rem 1rem; width: 100%; - color: var(--font-color) !important; + color: var(--heo-fontcolor) !important; text-shadow: none !important; } @@ -6053,10 +6888,11 @@ img.footer_mini_logo:hover { transform: translateX(-150px); } +/* 传送门 */ #travellings_button { display: inline; - padding: 0px 0.4rem; - transition: all 0.3s ease 0s; + padding: 0 0.4rem; + transition: 0.3s; } @media screen and (max-width: 768px) { @@ -6065,15 +6901,17 @@ img.footer_mini_logo:hover { } } +/* rightMenu右键菜单 */ #rightMenu { display: none; position: fixed; - padding: 0px 0.25rem; + padding: 0 0.25rem; width: 9rem; height: fit-content; top: 10%; left: 10%; background-color: var(--heo-maskbgdeep); + -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--heo-fontcolor); border-radius: 12px; @@ -6090,7 +6928,7 @@ img.footer_mini_logo:hover { #rightMenu .rightMenu-group { padding: 0.35rem 0.3rem; - transition: all 0.3s ease 0s; + transition: 0.3s; } #rightMenu .rightMenu-line { @@ -6104,13 +6942,13 @@ img.footer_mini_logo:hover { #rightMenu .rightMenu-group .rightMenu-item { border-radius: 8px; - transition: all 0.3s ease 0s; + transition: 0.3s; cursor: pointer; } #rightMenu .rightMenu-line .rightMenu-item { - margin: 0.25rem 0px; - padding: 0.25rem 0px; + margin: 0.25rem 0; + padding: 0.25rem 0; } #rightMenu .rightMenu-group.rightMenu-line .rightMenu-item { @@ -6132,11 +6970,11 @@ img.footer_mini_logo:hover { text-align: center; line-height: 1.5rem; width: 1.5rem; - padding: 0px 0.25rem; + padding: 0 0.25rem; } #rightMenu .rightMenu-line .rightMenu-item i { - margin: 0px 0.25rem; + margin: 0 0.25rem; } #rightMenu .rightMenu-group .rightMenu-item span { @@ -6153,14 +6991,16 @@ img.footer_mini_logo:hover { position: fixed; width: 100vw; height: 100vh; - background: 0px 0px; - top: 0px; - left: 0px; + background: none; + top: 0; + left: 0; display: none; + z-index: 101; + margin: 0 !important; z-index: 99993; - margin: 0px !important; } +/* 深色模式切换 */ #darkmode_navswitch { display: inline; position: relative; @@ -6170,30 +7010,37 @@ img.footer_mini_logo:hover { font-size: 0.9rem; } -[data-theme="dark"] #page-header.not-top-img #nav .darkmode_switchbutton { +[data-theme=dark] #page-header.not-top-img #nav .darkmode_switchbutton { color: var(--heo-yellow); } a.darkmode_switchbutton { + padding: 4px 8px !important; cursor: pointer; + margin: 0 !important; font-size: 0.9rem; color: var(--heo-fontcolor); - padding: 4px 8px !important; - margin: 0px !important; } -[data-theme="dark"] a.darkmode_switchbutton { +[data-theme=dark] a.darkmode_switchbutton { background: var(--heo-orange) !important; color: var(--heo-white) !important; } a.console_switchbutton { - cursor: pointer; padding: 4px 8px !important; + cursor: pointer; } +@media screen and (max-width: 768px) { + #nav-console { + display: none; + } +} + +/* 导航栏图标阴影 */ #nav .site-page { - text-shadow: transparent 0.05rem 0.05rem 0.1rem; + text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0); border-radius: 8px; } @@ -6207,13 +7054,13 @@ a.console_switchbutton { .post-bg #nav #site-name { color: var(--heo-white); - transition: all 0s ease 0s; + transition: 0s; } #nav #site-name { color: var(--heo-fontcolor); - padding: 0px; - transition: all 0.3s ease 0s; + padding: 0; + transition: 0.3s; display: flex; height: 35px; /*width: 75px;*/ @@ -6223,16 +7070,46 @@ a.console_switchbutton { border-radius: 40px; } +/* 搜索 */ #search-button > a > span { display: none; } +/* 下拉图标 */ #nav .menus_items .menus_item i.expand { display: none; } +/* 右下角设置按钮间距 */ +#rightside { + display: none; + padding-right: 8px; + position: fixed; + right: -38px; + bottom: 40px; + z-index: 100; + opacity: 0; + transition: all 0.5s ease 0s; +} + +#rightside > div > button, +#rightside > div > a { + margin-bottom: 8px; + transition: 0.3s; +} + +#rightside > div > button, +#rightside > div > a:hover { + transition: 0.3s; +} + +#rightside #rightside-config-hide { + transform: translate(42px, 0); +} + +/* footer背景色 */ #footer { - background: linear-gradient(180deg, var(--heo-card-bg-none) 0, var(--heo-card-bg) 25%); + background: linear-gradient(180deg, var(--heo-card-bg-none) 0%, var(--heo-card-bg) 25%); margin-top: 1rem; display: flex; flex-direction: column; @@ -6241,21 +7118,24 @@ a.console_switchbutton { @media screen and (max-width: 768px) { #footer { - background: linear-gradient(180deg, var(--heo-background) 0, var(--heo-card-bg) 25%); - margin-top: 0px; + background: linear-gradient(180deg, var(--heo-background) 0%, var(--heo-card-bg) 25%); + margin-top: 0; z-index: 999; } } +/* 搜索 */ #algolia-search .ais-hits--item.algolia-hit-item a { color: var(--heo-fontcolor); } +/* aplayer */ .aplayer .aplayer-list ol { backdrop-filter: blur(1px); + -webkit-backdrop-filter: blur(1px); } -.aplayer .aplayer-lrc::after { +.aplayer .aplayer-lrc:after { display: none !important; } @@ -6277,7 +7157,7 @@ a.console_switchbutton { #article-container.flink h2 { margin-top: 0.5rem; - margin-bottom: 0px; + margin-bottom: 0; } #algolia-hits .tag-list { @@ -6285,7 +7165,7 @@ a.console_switchbutton { border-radius: 8px; margin-right: 0.5rem; margin-top: 0.5rem; - border: var(--style-border); + border: var(--style-border-always); cursor: pointer; } @@ -6294,16 +7174,18 @@ a.console_switchbutton { color: var(--heo-white); } +/* 手机端菜单背景 */ #mobile-sidebar #mobile-sidebar-menus.open { background: var(--heo-maskbg); } #aside-content .card-info .card-info-data > .card-info-data-item { - transition: all 0.3s ease 0s; + transition: .3s; } +/* 手机端导航 */ #sidebar #sidebar-menus .site-data { - margin: 1rem 0px; + margin: 1rem 0; padding: 0.6rem 0.5rem; } @@ -6311,15 +7193,17 @@ a.console_switchbutton { display: none; } +/* 胶囊形状GitHub按钮 */ #card-info-btn { border-radius: 25px; overflow: hidden; } -#card-info-btn::before { +#card-info-btn:before { border-radius: 25px; } +/* 搜索结果文字 */ #algolia-search .search-dialog .ais-hits--item.algolia-hit-item a { color: var(--heo-fontcolor); width: auto; @@ -6329,12 +7213,14 @@ a.console_switchbutton { overflow: hidden; } +/* 其他页面封面移除 */ .not-index-bg { height: 2rem !important; background-image: none !important; background-color: var(--heo-none) !important; } + .not-index-bg img { display: none; } @@ -6343,49 +7229,82 @@ a.console_switchbutton { display: none; } +/* 进度条 */ .pace { + -webkit-pointer-events: none; pointer-events: none; + + -webkit-user-select: none; + -moz-user-select: none; user-select: none; + z-index: 2000; position: fixed; margin: auto; top: 4px; - left: 0px; - right: 0px; + left: 0; + right: 0; height: 8px; border-radius: 8px; width: 4rem; background: var(--heo-secondbg); border: var(--style-border); + overflow: hidden; } .pace-inactive .pace-progress { + /* display: none; */ + /* animation: 1s hidetip; */ opacity: 0; - transition: all 0.3s ease-in 0s; + transition: 0.3s ease-in; } .pace .pace-progress { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; box-sizing: border-box; - transform: translate3d(0px, 0px, 0px); + + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + max-width: 200px; + position: fixed; z-index: 2000; display: block; position: absolute; - top: 0px; + top: 0; right: 100%; height: 100%; width: 100%; - animation: 2s ease 0s infinite normal none running gradient; + background: var(--heo-logo-color); + animation: gradient 2s ease infinite; background-size: 200%; } .pace.pace-inactive { + /* display: none; */ opacity: 0; - transition: all 0.3s ease 0s; + transition: 0.3s; top: -8px; } +/* 进度条缓慢消失 */ +/* @keyframes hidetip { + from { + opcity: 1; + } + to { + opacity: 0; + } +} */ + +/* 文章页侧边栏固定位置 */ @media screen and (max-width: 1300px) { #aside-content .sticky_layout { top: 60px; @@ -6406,11 +7325,11 @@ a.console_switchbutton { #aside-content .sticky_layout { top: 80px; - transition: top 0s ease 0s; + transition: top 0s; } #aside-content .sticky_layout .card-widget:first-child { - margin-top: 0px; + margin-top: 0; } #aside-content .card-widget:hover { @@ -6442,29 +7361,32 @@ a.console_switchbutton { } } +/* 最新文章侧边栏 */ .card-widget.card-recent-post { padding: 0.4rem 0.6rem !important; } +/* 最新文章侧边栏时间显示 */ #aside-content .aside-list > .aside-list-item .content > time { display: none; } +/* 最新文章侧边栏标题 */ #aside-content .aside-list > .aside-list-item .content > .title { -webkit-line-clamp: 3; - font-weight: 700; - padding: 2px 0px; + font-weight: bold; + padding: 2px 0; } +/* 最新文章侧边栏悬浮 */ #aside-content .aside-list > .aside-list-item { - padding-right: 8px; - padding-left: 8px; - border-radius: 12px; - transition: all 0.3s ease 0s; - margin: 4px 0px; - cursor: pointer; + padding: 8px; padding-top: 6px !important; padding-bottom: 6px !important; + border-radius: 12px; + transition: 0.3s; + margin: 4px 0; + cursor: pointer; } @media screen and (min-width: 1300px) { @@ -6482,11 +7404,11 @@ a.console_switchbutton { } #aside-content .aside-list > .aside-list-item:not(:last-child) { - border-bottom: 0 dashed var(--heo-background) !important; + border-bottom: 0px dashed var(--heo-background) !important; } #aside-content .aside-list > .aside-list-item .thumbnail { - -webkit-mask-image: -webkit-radial-gradient(center center, rgb(255, 255, 255), rgb(0, 0, 0)); + -webkit-mask-image: -webkit-radial-gradient(center, rgb(255, 255, 255), rgb(0, 0, 0)); border-radius: 8px; border: var(--style-border); } @@ -6494,7 +7416,7 @@ a.console_switchbutton { #aside-content .aside-list > .aside-list-item:hover { background: var(--heo-main); color: var(--heo-white); - transition: all 0.3s ease 0s; + transition: 0.3s; box-shadow: var(--heo-shadow-main); } @@ -6502,16 +7424,17 @@ a.console_switchbutton { color: var(--heo-white) !important; } +/* 侧边栏按钮文字 */ a.card-archive-list-link-more { + color: var(--heo-white) !important; background: var(--heo-card-btn-bg); margin-top: 8px; - color: var(--heo-white) !important; } #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a { border-radius: 8px; - margin: 4px 0px; + margin: 4px 0; display: flex; flex-direction: column; align-content: space-between; @@ -6526,14 +7449,15 @@ a.card-archive-list-link-more { #aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list { display: flex; - flex-flow: row wrap; + flex-direction: row; justify-content: space-between; + flex-wrap: wrap; } .card-allinfo hr { display: flex; position: relative; - margin: 1rem 0px; + margin: 1rem 0; border: 1px dashed var(--heo-theme-op); } @@ -6546,7 +7470,7 @@ span.card-archive-list-count { text-align: left; font-size: 1.1rem; line-height: 0.9; - font-weight: 700; + font-weight: bold; } .card-archive-list-count-group { @@ -6565,7 +7489,7 @@ span.card-archive-list-count { width: auto; text-align: left; font-size: 14px; - font-weight: 700; + font-weight: bold; } .card-archive-list-date { @@ -6580,7 +7504,8 @@ li.card-archive-list-item { .card-category-list { display: flex; - flex-flow: row wrap; + flex-direction: row; + flex-wrap: wrap; justify-content: space-between; } @@ -6593,10 +7518,11 @@ li.card-archive-list-item { } .card-category-list-name { - text-align: center; width: 100% !important; + text-align: center; } +/* 侧边栏统计 */ .webinfo-item { display: flex; white-space: nowrap; @@ -6613,6 +7539,7 @@ li.card-archive-list-item { text-align: center; } +/* 侧边栏配置 */ @media screen and (min-width: 1300px) { #aside-content { padding-left: 1rem; @@ -6626,45 +7553,52 @@ li.card-archive-list-item { top: calc(60px + 0.5rem); } - [data-theme="dark"] #aside-content > .card-widget.card-info { + [data-theme=dark] #aside-content > .card-widget.card-info { border: var(--style-border); } .coverdiv { height: 130%; } + } + +/* madium-zoom */ .medium-zoom-overlay { - backdrop-filter: saturate(180%) blur(20px); background: var(--heo-maskbg) !important; z-index: 99998 !important; + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); } .medium-zoom-image--opened { border-radius: 2px; } +/* 通用 */ #toggle-sidebar { bottom: 80px; } +/* 按钮样式 */ .button--animated { - transition: all 0.3s ease 0s; border-radius: 8px !important; + transition: 0.3s; } #error-wrap .error-content .error-info a:hover { background-color: var(--heo-blue); - transition: all 0.3s ease 0s; + transition: 0.3s; transform: scale(1.03); box-shadow: var(--heo-shadow-blue); } -.button--animated::before { +.button--animated:before { display: none; } +/* hexo-widget-tree 侧边文章导航 */ a.tree-list-post-link { font-size: 0.8rem; line-height: 1.2 !important; @@ -6672,9 +7606,10 @@ a.tree-list-post-link { li.tree-list-item { line-height: 1.9; - margin: 0.3rem 0px; + margin: 0.3rem 0; } +/* 通用标题 */ .title-h2-a { display: flex; align-items: center; @@ -6685,7 +7620,7 @@ li.tree-list-item { .title-h2-a a { margin-left: 0.5rem; color: var(--heo-secondtext); - font-weight: 700; + font-weight: bold; } .title-h2-a a:hover { @@ -6698,10 +7633,12 @@ li.tree-list-item { } .title-h2-a-left h2 { - margin-top: 0px !important; - margin-bottom: 0px !important; + margin-top: 0 !important; + margin-bottom: 0 !important; } +/* 基金 */ + #card-funds .funds-list::-webkit-scrollbar { display: none !important; } @@ -6711,14 +7648,14 @@ li.tree-list-item { width: 100%; text-align: center; color: var(--heo-secondtext); - margin: 0.5rem 0px 0px; + margin: 0.5rem 0 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: absolute; bottom: 0.5rem; left: 0px; - padding: 0px 1rem; + padding: 0 1rem; } .funds-list { @@ -6739,8 +7676,9 @@ span.fund_name { .funds-list-item .content { display: flex; - flex-flow: row nowrap; + flex-direction: row; justify-content: space-between; + flex-wrap: nowrap; } .fund_dayGrowth { @@ -6756,11 +7694,13 @@ span.fund_name { color: var(--heo-green); } +/* 音乐宣传 */ #aside-content .card-widget#card-music { background: var(--heo-pink); display: flex; - place-content: center; - padding: 0px; + justify-content: center; + align-content: center; + padding: 0; cursor: pointer; border: none; } @@ -6772,21 +7712,24 @@ span.fund_name { #aside-content .card-widget#card-music:hover img { transform: scale(1.03); - transition: all 0.5s ease 0s; - backface-visibility: hidden; - transform-style: preserve-3d; + transition: 0.5s; + -webkit-backface-visibility: hidden; + -webkit-transform-style: preserve-3d; } .music-link { display: flex; - place-content: center; + justify-content: center; + align-content: center; } +/* 友情链接 */ #aside-content .card-widget#card-friendlinks { background: var(--heo-main); display: flex; - place-content: center; - padding: 0px; + justify-content: center; + align-content: center; + padding: 0; cursor: pointer; border: none; } @@ -6798,21 +7741,24 @@ span.fund_name { #aside-content .card-widget#card-friendlinks:hover img { transform: scale(1.03); - transition: all 0.5s ease 0s; - backface-visibility: hidden; - transform-style: preserve-3d; + transition: 0.5s; + -webkit-backface-visibility: hidden; + -webkit-transform-style: preserve-3d; } .friend-link { display: flex; - place-content: center; + justify-content: center; + align-content: center; } +/* 微信公众号 */ #aside-content .card-widget#card-wechat { - background: rgb(7, 193, 96); + background: #07C160; display: flex; - place-content: center; - padding: 0px; + justify-content: center; + align-content: center; + padding: 0; cursor: pointer; border: none; height: 110px; @@ -6825,9 +7771,12 @@ span.fund_name { .friend-link { display: flex; - place-content: center; + justify-content: center; + align-content: center; } +/* 微信公众号翻转 */ + #flip-wrapper { position: relative; width: 235px; @@ -6835,39 +7784,51 @@ span.fund_name { z-index: 1; } +/* this need to be here - i dont know why?*/ #flip-wrapper { - perspective: 1000px; + -webkit-perspective: 1000; + perspective: 1000; } #flip-content { width: 100%; height: 100%; + -webkit-transform-style: preserve-3d; transform-style: preserve-3d; - transition: all 0.3s cubic-bezier(0, 0, 0, 1.29) 0s; + transition: cubic-bezier(0, 0, 0, 1.29) 0.3s; } #flip-wrapper:hover #flip-content { + -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } -/* 公众号推广部分 */ .face { position: absolute; width: 100%; height: 100%; + -webkit-backface-visibility: hidden; backface-visibility: hidden; + /* background-color: #e71840; */ + /*background: url(../images/wechat/wechat1.png) center center no-repeat;*/ + background-size: 100%; } .back.face { display: block; + -webkit-transform: rotateY(180deg); transform: rotateY(180deg); box-sizing: border-box; + /* background-color: #212121; */ + /*background: url(../images/wechat/wechat2.png) center center no-repeat;*/ + background-size: 100%; } +/* 商务广告-设计周刊 */ #card-vip-designweekly.card-widget { - padding: 0px; - cursor: pointer; display: flex !important; + padding: 0; + cursor: pointer; } #card-vip-designweekly.card-widget .card-vip-designweekly-img { @@ -6887,13 +7848,15 @@ span.fund_name { color: var(--heo-white); } +/* 开关 */ #widget-tree-button { - color: var(--heo-fontcolor); background-color: var(--heo-secondbg) !important; box-shadow: var(--heo-shadow-light2black) !important; + color: var(--heo-fontcolor); } #widget-tree:hover #widget-tree-button { + /* display: none!important; */ opacity: 0; left: -1.5rem; } @@ -6903,8 +7866,9 @@ span.fund_name { } #widget-tree:hover { + left: 0 !important; backdrop-filter: blur(20px); - left: 0px !important; + -webkit-backdrop-filter: blur(20px); } #widget-tree a { @@ -6927,12 +7891,15 @@ span.fund_name { } } + +/* guli置顶 */ + .guli_top { position: fixed; z-index: 99; right: 30px; display: flex; - transition: all 0.3s ease 0s; + transition: 0.3s; opacity: 0; bottom: -25px; width: 88px; @@ -6978,6 +7945,7 @@ span.fund_name { } } +/* cookies */ #cookies-window { min-width: 300px; background: var(--heo-maskbgdeep); @@ -6989,17 +7957,18 @@ span.fund_name { right: 20px; position: fixed; border-radius: 12px; - transition: all 0.3s ease 0s; + transition: 0.3s; z-index: 1002; user-select: none; backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: saturate(180%) blur(20px); border: var(--style-border); - animation: 0.6s cubic-bezier(0.42, 0, 0.3, 1.11) 0s 1 normal none running barrageIn; + animation: barrageIn 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); } #cookies-window.cw-hide { opacity: 0; - animation: 0.6s cubic-bezier(0.42, 0, 0.3, 1.11) 0s 1 normal none running barrageOut; + animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11); z-index: -1; } @@ -7007,7 +7976,7 @@ span.fund_name { padding-bottom: 4px; border-bottom: var(--style-border); font-size: 12px; - font-weight: 700; + font-weight: bold; } #cookies-window .cookies-window-content { @@ -7019,7 +7988,7 @@ span.fund_name { .cookie-to { margin-right: 4px; - font-weight: 700; + font-weight: bold; } .cookies-link { @@ -7035,7 +8004,7 @@ span.fund_name { .heo-tag { padding: 1px 6px; - border-radius: 6px 6px 6px 0px; + border-radius: 6px 6px 6px 0; margin-left: 4px; height: 20px; line-height: 19px; @@ -7051,42 +8020,74 @@ span.fund_name { background: var(--heo-red); } +/* 加载页 +---------------------------------------------------------------- */ + +/* 已经写在loading.pug中了 */ + +/* #loading-box .loading-bg{ + display: flex; + width: 100%; + height: 100%; + position: fixed; + background: var(--heo-card-bg); + z-index: 99999; + opacity: 1; + transition: 0.3s; + pointer-events: all; +} + +#loading-box.loaded .loading-bg{ + opacity: 0; + pointer-events: none; +} + +#loading-box .loading-img{ + width: 100px; + margin: auto; + animation-duration: 0.3s; + animation-name: loadingAction; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +@keyframes loadingAction { + from { + opacity: 1; + } + + to { + opacity: 0.4; + } +} */ + +/* 主页 +---------------------------------------------------------------- */ + +/* 主页顶部封面 */ #page-header.full_page { height: 2rem; - background-color: var(--heo-none); background-image: none !important; + background-color: var(--heo-none); } #page-header.full_page #site-info { display: none; } +/* 主页导航栏让位偏移 */ +/* .layout_page .recent-posts{ + margin-top: 2em; +} +.layout_page .aside_content{ + margin-top: 2em; +} */ + .layout > div:first-child { width: calc(100% - 300px); } -/* 当隐藏边栏时，显示 100% */ -.layout.hide-aside > div:first-child { - width: 100% !important; -} - -/* 侧边栏在左侧时，显示 100% */ -.layout.left-aside > div:first-child { - -webkit-box-ordinal-group: 2; - -moz-box-ordinal-group: 2; - -o-box-ordinal-group: 2; - -ms-flex-order: 2; - -webkit-order: 2; - order: 2; -} - -/* 侧栏在左侧时，关闭左边距，打开右边距 */ -.layout.left-aside .aside-content { - padding-right: 15px; - padding-left: 0px !important; -} - - +/* 主页分类 */ div#categoryList { display: flex; width: 100%; @@ -7096,7 +8097,7 @@ div#categoryList { .categoryItem { overflow: hidden; transform: scale(1); - transition: all 0.8s cubic-bezier(0.65, 0.15, 0.37, 1.19) 0s; + transition: all 0.8s cubic-bezier(0.65, 0.15, 0.37, 1.19); height: 48%; border-radius: 12px; } @@ -7109,17 +8110,17 @@ a.categoryButton { display: inline-block; text-align: left; line-height: 4em; - font-weight: 700; + font-weight: bold; font-size: 0.9rem; color: var(--heo-white); - transition: all 0.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0s; + transition: all 0.8s cubic-bezier(0.39, 0.575, 0.565, 1); transform: scale(1); overflow: hidden; - font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"; + font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei; } a.categoryButton i { - transform: scale(1) rotate(15deg); + transform: scale(1.0) rotate(15deg); } @media screen and (min-width: 1300px) { @@ -7140,7 +8141,7 @@ a.categoryButton i { } } -a.categoryButton::after { +a.categoryButton:after { top: 50px; width: 1rem; left: 21px; @@ -7159,9 +8160,9 @@ a.categoryButton i { font-size: 5rem; opacity: 0.2; position: absolute; - right: 0px; + right: 0%; top: 20%; - transition: all 0.3s ease 0s; + transition: 0.3s; width: 100px; text-align: center; filter: blur(2px); @@ -7173,12 +8174,12 @@ a.categoryButton i { } .recent-post-top .categoryGroup { + min-width: 130px !important; margin-bottom: 0.5rem; margin-left: 1rem; max-height: 164px; overflow: hidden; position: relative; - min-width: 130px !important; } } @@ -7201,15 +8202,17 @@ div#banners { @media screen and (min-width: 1300px) { .topGroup { display: flex; - flex-flow: row wrap; - place-content: space-between flex-end; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-end; height: calc(328px + 0.5rem); + align-content: space-between; width: calc(600px + 1.5rem); position: relative; } div#bannerGroup { - width: calc((100% - 600px) - 2rem); + width: calc(100% - 600px - 2rem); margin-right: 0.5rem; height: calc(328px + 0.5rem); display: flex; @@ -7225,12 +8228,13 @@ div#banners { margin-bottom: 0.5rem; border: var(--style-border); border-radius: 12px; + overflow: hidden; position: relative; box-shadow: var(--heo-shadow-border); flex-direction: column; overflow: hidden; - transition: all 0.3s ease 0s; - clip-path: inset(0px round 12px); + transition: 0.3s; + clip-path: inset(0 0 0 0 round 12px); } div#banners:hover { @@ -7250,13 +8254,13 @@ div#banners { #banners .banner-button { padding: 8px 12px; - background: var(--font-color); + background: var(--heo-fontcolor); border-radius: 12px; color: var(--heo-card-bg); display: flex; align-items: center; z-index: 1; - transition: all 0.3s ease 0s; + transition: 0.3s; cursor: pointer; box-shadow: var(--heo-shadow-black); } @@ -7291,10 +8295,11 @@ div#banners { top: 1.5rem; } + .banners-title-big { font-size: 36px; line-height: 1; - font-weight: 700; + font-weight: bold; margin-bottom: 8px; } @@ -7310,8 +8315,8 @@ div#banners { position: absolute; width: 100%; height: 100%; - top: 0px; - left: 0px; + top: 0; + left: 0; background: var(--heo-theme); color: var(--heo-white); padding-left: 0.5rem; @@ -7319,13 +8324,13 @@ div#banners { flex-direction: column; justify-content: center; opacity: 0; - transition: all 0.6s cubic-bezier(0.71, 0.15, 0.16, 1.15) 0s; + transition: cubic-bezier(0.71, 0.15, 0.16, 1.15) 0.6s; } .bannerText { font-size: 4rem; line-height: 4rem; - font-weight: 700; + font-weight: bold; } .banner-righticon { @@ -7336,11 +8341,13 @@ div#banners { #banners:hover #banner-hover { opacity: 1; padding-left: 2rem; - background: 0% 0% / 200% rgba(66, 89, 239, 0.79); + background: #4259efc9; backdrop-filter: blur(15px); - backface-visibility: hidden; - transform-style: preserve-3d; - transition: all 0.3s ease 0s; + -webkit-backdrop-filter: blur(15px); + -webkit-backface-visibility: hidden; + -webkit-transform-style: preserve-3d; + transition: 0.3s; + background-size: 200%; cursor: pointer; } @@ -7349,13 +8356,13 @@ div#banners { width: calc(600px + 1rem); height: 100%; z-index: 1; - top: 0px; - left: 0px; + top: 0; + left: 0; background: var(--card-bg); border-radius: 12px; margin-left: 0.5rem; overflow: hidden; - transition: all 0.3s ease 0s; + transition: 0.3s; display: flex; cursor: pointer; pointer-events: all; @@ -7363,11 +8370,11 @@ div#banners { .topGroup .todayCard::after { position: absolute; - content: ""; + content: ''; width: 100%; height: 100%; - top: 0px; - left: 0px; + top: 0; + left: 0; } .topGroup .todayCard.hide { @@ -7382,7 +8389,7 @@ div#banners { z-index: 2; color: var(--heo-white); max-width: 60%; - transition: all 0.3s ease 0s; + transition: 0.3s; } .topGroup .todayCard.hide .todayCard-info { @@ -7397,7 +8404,7 @@ div#banners { .topGroup .todayCard .todayCard-info .todayCard-title { font-size: 28px; - font-weight: 700; + font-weight: bold; line-height: 36px; } @@ -7406,7 +8413,7 @@ div#banners { right: 2rem; bottom: 2rem; display: flex; - transition: all 0.3s ease 0s; + transition: 0.3s; } .topGroup .todayCard.hide .banner-button-group { @@ -7420,9 +8427,10 @@ div#banners { display: flex; align-items: center; z-index: 1; - transition: all 0.3s ease 0s; + transition: 0.3s; cursor: pointer; backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); height: 40px; width: 124px; justify-content: center; @@ -7442,11 +8450,11 @@ div#banners { position: absolute; min-width: 100%; min-height: 100%; - top: 0px; - left: 0px; + top: 0; + left: 0; background-size: cover; z-index: -1; - transition: all 0.3s ease 0s; + transition: 0.3s; } .topGroup .todayCard.hide .todayCard-cover { @@ -7455,11 +8463,11 @@ div#banners { } @keyframes rowup { - 0% { - transform: translateX(0px); + from { + transform: translateX(0%); } - 100% { + to { transform: translateX(-50%); } } @@ -7476,7 +8484,7 @@ div#banners { } .tags-group-all.nowrapMove { - transform: rotate(0deg); + transform: rotate(0); padding-bottom: 2rem; } @@ -7484,15 +8492,15 @@ div#banners { margin-top: 5rem; display: flex; flex-wrap: nowrap; - animation: 60s linear 0s infinite normal none running rowup; + animation: rowup 60s linear infinite; } .nowrapMove .tags-group-wrapper { margin-top: 7rem; - animation: 120s linear 0s infinite normal none running rowup; + animation: rowup 120s linear infinite; } -.tags-group-icon-pair .tags-group-icon:nth-child(2n) { +.tags-group-icon-pair .tags-group-icon:nth-child(even) { margin-top: 1rem; transform: translate(-60px); } @@ -7505,9 +8513,9 @@ div#banners { display: flex; align-items: center; justify-content: center; - color: rgb(255, 255, 255); + color: white; font-size: 66px; - font-weight: 700; + font-weight: bold; box-shadow: var(--heo-shadow-blackdeep); } @@ -7526,19 +8534,22 @@ div#banners { object-fit: cover; } + #categoryList > div:nth-child(1) > a::before { height: 24px; width: 44px; content: ""; - background: url(../images/top.png) 0% 0% / 38px 24px no-repeat; + background: url(https://img.zhheo.com/i/2022/08/31/630efd0bc1115.png) no-repeat; + background-size: 38px 24px; position: absolute; top: 0px; - left: 0px; + left: 0; } .categoryItem:hover i { opacity: 0.8; - transition: all 0.8s ease 0.15s; + transition: 0.8s; + transition-delay: 0.15s; transform: scale(1.03) rotate(0deg); font-size: 2.5rem; filter: blur(0px); @@ -7550,6 +8561,10 @@ div#banners { } } +#categoryList > a:nth-child() > i { + padding-right: 8px; +} + .cate-button-text { box-shadow: var(--heo-shadow-black); } @@ -7560,6 +8575,7 @@ div#banners { } } +/* 新主页分类 */ .recent-post-top .categoryGroup { display: flex; flex-direction: column; @@ -7578,13 +8594,13 @@ div#banners { } .categoryItem { - width: calc(33.3333% - 0.33rem); + width: calc(100% / 3 - 0.33rem); height: 100%; margin-right: 0.5rem; } .categoryItem:last-child { - margin-right: 0px; + margin-right: 0; } .categoryItem:hover { @@ -7597,33 +8613,41 @@ div#banners { } a.categoryButton.bikan { - background: linear-gradient(to right, rgb(53, 139, 255), rgb(21, 198, 255)) 0% 0% / 200%; + background: linear-gradient(to right, #358bff, #15c6ff); + background-size: 200%; } a.categoryButton.remen { - background: linear-gradient(to right, rgb(255, 102, 85), rgb(255, 191, 55)) 0% 0% / 200%; + background: linear-gradient(to right, #ff6655, #ffbf37); + background-size: 200%; } a.categoryButton.shiyong { - background: linear-gradient(to right, rgb(24, 231, 174), rgb(30, 235, 235)) 0% 0% / 200%; + background: linear-gradient(to right, #18e7ae, #1eebeb); + background-size: 200%; } -[data-theme="dark"] a.categoryButton.bikan { - background: linear-gradient(to right, rgb(6, 83, 184), rgb(47, 203, 255)) 0% 0% / 200%; +[data-theme=dark] a.categoryButton.bikan { + background: linear-gradient(to right, #0653b8, #2fcbff); + background-size: 200%; } -[data-theme="dark"] a.categoryButton.remen { - background: linear-gradient(to right, rgb(226, 42, 22), rgb(218, 152, 12)) 0% 0% / 200%; +[data-theme=dark] a.categoryButton.remen { + background: linear-gradient(to right, #e22a16, #da980c); + background-size: 200%; } -[data-theme="dark"] a.categoryButton.shiyong { - background: linear-gradient(to right, rgb(9, 158, 116), rgb(14, 164, 164)) 0% 0% / 200%; +[data-theme=dark] a.categoryButton.shiyong { + background: linear-gradient(to right, #099e74, #0ea4a4); + background-size: 200%; } + a.categoryButton:hover { - background-position: 100% 0px; + background-position: 100% 0; } +/* 首页分类条展示 */ #category-bar { padding: 0.4rem 1rem 0.4rem 0.5rem; background: var(--heo-card-bg); @@ -7633,7 +8657,7 @@ a.categoryButton:hover { overflow: hidden; margin-bottom: 1rem; border: var(--style-border); - transition: all 0.3s ease 0s; + transition: 0.3s; width: 100%; justify-content: space-between; } @@ -7645,27 +8669,28 @@ a.categoryButton:hover { } .category-in-bar-tips { - margin-bottom: 0.25rem; + margin-bottom: .25rem; } } @media screen and (max-width: 768px) { #category-bar { - border-radius: 0px; + border-radius: 0; background: var(--heo-background); - margin-bottom: 0px; + margin-bottom: 0rem; + position: -webkit-sticky; position: sticky; top: 60px; z-index: 1; - padding: 0px 1rem 0px 16px; + padding: 0rem 1rem 0rem 16px; height: 50px; - margin-top: 0px; + margin-top: 0; align-items: center; } } #category #category-bar { - padding: 0px; + padding: 0; border: none; box-shadow: none; } @@ -7691,21 +8716,22 @@ a.categoryButton:hover { } .category-in-bar .category-in-bar-tips { - margin-bottom: 0px; + margin-bottom: 0; } .category-in-bar #category-bar { - margin-bottom: 0px; + margin-bottom: 0; } + .category-bar-items::-webkit-scrollbar { display: none; } .category-bar-item a { padding: 0.1rem 0.5rem; - margin: 0px 4px; - font-weight: 700; + margin: 0 4px; + font-weight: bold; border-radius: 8px; } @@ -7730,6 +8756,7 @@ a.categoryButton:hover { } .category-in-bar { + position: -webkit-sticky; position: sticky; top: 60px; background: var(--heo-background); @@ -7739,36 +8766,126 @@ a.categoryButton:hover { .category-bar-more { margin-left: 1rem; - font-weight: 700; + font-weight: bold; } -li, -ul { +/* 主页哔哔bb */ +#bber-talk { + width: 100%; + height: 25px; + line-height: 25px; + display: flex; + flex-direction: column; +} + +#bbtalk { + overflow: hidden; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +#bber-talk .li-style { + width: auto; + max-width: 100%; + height: 25px; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + transition: 0.3s; + font-weight: bold; + margin: auto; + cursor: pointer; + white-space: nowrap; +} + +#bbTimeList .li-style:hover { + color: var(--heo-theme); + transition: 0.3s; +} + +ul, +li { list-style: none; display: block; - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; } +#bbTimeList { + background: var(--heo-none); + color: var(--heo-fontcolor); + padding: 0.5rem 1rem; + border-radius: 12px; + box-shadow: var(--heo-shadow-lightblack); + display: flex; + transition: 0.3s; + margin-bottom: 1rem; + border: var(--style-border); + align-items: center; + height: 50px; +} + +#bbTimeList:hover { + border: var(--style-border-hover); + box-shadow: var(--heo-shadow-main); +} + +@media screen and (min-width: 1300px) { + #bbTimeList { + margin-bottom: 1rem; + } +} + +/* 哔哔前往 */ +.bber-gotobb { + line-height: 25px; + margin-left: 1rem; + transition: 0.3s; + cursor: pointer; +} + +.bber-gotobb:hover { + opacity: 0.8; + color: var(--heo-theme); +} + +/* 哔哔标志 */ +.icon-bblogo { + font-size: 2rem; + font-size: 2rem; + line-height: 22px; + margin-right: 1rem; + transition: 0.3s; + cursor: pointer; +} + +.icon-bblogo:hover { + opacity: 0.8; + color: var(--heo-theme); +} + +/* 文章卡片相关 */ #recent-posts > .recent-post-item > .recent-post-info { - padding: 0px; + padding: 0; } .recent-post-item .recent-post-info .recent-post-info-top { position: relative; - transition: all 0.3s ease 0s; + transition: 0.3s; padding: 32px; width: 100%; } .recent-post-item .recent-post-info .recent-post-info-top .article-title { line-height: 30px; - margin-top: 0px; - font-weight: 700; + margin-top: 0; + font-weight: bold; color: var(--heo-fontcolor); - margin-bottom: 0px; + margin-bottom: 0; width: 100%; - transition: all 0.3s ease 0s; + transition: .3s; font-size: 1rem; -webkit-line-clamp: 2; display: -webkit-box; @@ -7802,9 +8919,9 @@ ul { } #recent-posts > .recent-post-item .post_cover { + transition: 1s !important; height: 225px; width: 100%; - transition: all 1s ease 0s !important; } .recent-post-item.post-card-large .recent-post-info .recent-post-info-top .content { @@ -7819,7 +8936,7 @@ ul { .recent-post-item .recent-post-info .recent-post-info-top .content { opacity: 0; - transition: all 0.3s ease 0s; + transition: 0.3s; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; @@ -7854,7 +8971,7 @@ ul { @media screen and (max-width: 768px) { .recent-post-item .recent-post-info .recent-post-info-top { - padding: 0px 20px; + padding: 0 20px; top: 20px; } @@ -7869,22 +8986,28 @@ ul { } } +/* 文章卡片文字信息 */ #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap a { color: var(--heo-fontcolor); } +/* 文章封面 */ + #recent-post-top .recent-post-item .post_cover { width: 100%; } +/* 文章卡片图标与文字间隙 */ #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap i { - margin: 0px 0.4rem 0px 0px; + margin: 0 0.4rem 0 0; } +/* 文章卡片置顶标签 */ #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap .sticky { color: var(--heo-fontcolor); } +/* 文章卡片高度 */ #recent-posts .recent-post-item { height: fit-content; background: var(--heo-card-bg); @@ -7899,12 +9022,18 @@ ul { } #recent-posts > .recent-post-item .right_radius { - border-radius: 12px 0px 0px 12px; + border-top-left-radius: 12px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 12px; } @media screen and (min-width: 1300px) { #recent-posts > .recent-post-item .right_radius { - border-radius: 12px 12px 0px 0px; + border-top-left-radius: 12px; + border-top-right-radius: 12px; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; } } @@ -7915,11 +9044,15 @@ ul { } } +/* 文章卡片偏移样式 */ @media screen and (max-width: 1300px) { - #recent-posts > .recent-post-item .cover_radius, - #recent-posts > .recent-post-item .right_radius { - border-radius: 12px 0px 0px 12px; + #recent-posts > .recent-post-item .right_radius, + #recent-posts > .recent-post-item .left_radius { + border-top-left-radius: 12px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 12px; width: 75%; display: flex; height: 200px; @@ -7927,9 +9060,9 @@ ul { #recent-posts > .recent-post-item:hover .post_cover img.post_bg { transform: scale(1.03); - transition: all 0.3s ease-in-out 0s; + transition: 0.3s ease-in-out; filter: brightness(0.85); - border-radius: 12px 0px 0px 12px; + border-radius: 12px 0 0 12px; } #recent-posts > .recent-post-item.post-card-large:hover .post_cover img.post_bg { @@ -7938,41 +9071,44 @@ ul { #recent-posts > .recent-post-item .post_cover img.post_bg { min-width: 100%; - backface-visibility: hidden; - transform-style: preserve-3d; - transition: all 0.3s ease-in-out 0s; + -webkit-backface-visibility: hidden; + -webkit-transform-style: preserve-3d; + transition: 0.3s ease-in-out; min-height: 100%; } #recent-posts > .recent-post-item:hover > .recent-post-info { - transition: all 0.3s ease 0s; + transition: all 0.3s; position: relative; } #recent-posts > .recent-post-item > .recent-post-info { - transition: all 0.3s ease 0s; + transition: all 0.3s; } } #recent-posts > .recent-post-item:hover .post_cover img.post_bg { transform: scale(1.03); - transition: all 0.3s ease-in-out 0s; + transition: 0.3s ease-in-out; filter: brightness(0.85); - border-radius: 12px 0px 0px 12px; + border-radius: 12px 0 0 12px; } @media screen and (min-width: 1300px) { - #recent-posts > .recent-post-item .cover_radius, - #recent-posts > .recent-post-item .right_radius { - border-radius: 12px 12px 0px 0px; + #recent-posts > .recent-post-item .right_radius, + #recent-posts > .recent-post-item .left_radius { + border-top-left-radius: 12px; + border-top-right-radius: 12px; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; width: 100%; display: flex; } } -#recent-posts > .recent-post-item .cover_radius a, -#recent-posts > .recent-post-item .right_radius a { +#recent-posts > .recent-post-item .right_radius a, +#recent-posts > .recent-post-item .left_radius a { min-height: 100%; min-width: 100%; } @@ -7982,22 +9118,26 @@ ul { overflow: hidden; } +/* 文章置顶卡片样式 */ .recent-top-post-group { border-radius: 12px; - overflow: auto hidden; + overflow: hidden; + overflow-x: auto; width: 100%; - margin-bottom: 0px; + margin-bottom: 0rem; } .recent-post-top { display: flex; - flex-flow: row nowrap; + flex-direction: row; + flex-wrap: nowrap; width: 100%; overflow-x: scroll; } .recent-post-top::-webkit-scrollbar { display: none; + /* Chrome Safari */ } .recent-post-top .recent-post-item { @@ -8013,7 +9153,7 @@ ul { height: 164px; max-height: 164px; border: var(--style-border-always); - transition: all 0.3s ease 0s; + transition: 0.3s; position: relative; box-shadow: var(--heo-shadow-border); } @@ -8022,7 +9162,7 @@ ul { .recent-post-top .recent-post-item { border-radius: 8px; box-shadow: none; - clip-path: inset(0px round 8px); + clip-path: inset(0 0 0 0 round 8px); } .recent-post-top .recent-post-item:last-child { @@ -8046,12 +9186,13 @@ ul { .recent-top-post-group { overflow: visible; + overflow-x: visible; } } span.recent-post-top-text { position: absolute; - top: 0px; + top: 0; left: -40px; display: flex; z-index: 1; @@ -8059,13 +9200,13 @@ span.recent-post-top-text { color: var(--heo-white); padding: 2px 8px; font-size: 0.6rem; - border-radius: 12px 0px; - transition: all 0.3s ease 0s; + border-radius: 12px 0 12px 0; + transition: 0.3s; cursor: pointer; } .recent-post-item:hover .recent-post-top-text { - left: 0px; + left: 0; } @media screen and (min-width: 1300px) { @@ -8082,7 +9223,7 @@ span.recent-post-top-text { @media screen and (max-width: 768px) { .recent-top-post-group { - border-radius: 0px; + border-radius: 0; background: var(--heo-background); } @@ -8091,10 +9232,11 @@ span.recent-post-top-text { } .recent-post-top .recent-post-item .post_cover img { - border-radius: 8px 8px 0px 0px !important; + border-radius: 8px 8px 0 0 !important; } } +/* 封面 */ .recent-post-top .recent-post-item .post_cover a { height: 100px; overflow: hidden; @@ -8105,7 +9247,7 @@ span.recent-post-top-text { object-fit: cover; width: 100%; background: var(--heo-secondbg); - border-radius: 12px 12px 0px 0px; + border-radius: 12px 12px 0 0; } .recent-post-top .recent-post-item:hover .post_cover img { @@ -8113,12 +9255,13 @@ span.recent-post-top-text { } .recent-post-item .post_cover { - -webkit-mask-image: -webkit-radial-gradient(center center, rgb(255, 255, 255), rgb(0, 0, 0)); + -webkit-mask-image: -webkit-radial-gradient(center, rgb(255, 255, 255), rgb(0, 0, 0)); } +/* 标题 */ .recent-post-top .recent-post-item .recent-post-info { - transition: all 0.3s ease 0s; - padding: 0.3rem 0.5rem !important; + padding: 0.3rem 0.5rem 0.3rem 0.5rem !important; + transition: 0.3s; } .recent-post-top .recent-post-item:hover .recent-post-info a { @@ -8128,7 +9271,7 @@ span.recent-post-top-text { @media screen and (max-width: 1300px) { .recent-post-top .recent-post-item:hover .recent-post-info a { color: var(--heo-theme); - transition: all 0.3s ease 0s; + transition: 0.3s; } } @@ -8138,11 +9281,13 @@ span.recent-post-top-text { display: -webkit-box; -webkit-box-orient: vertical; line-height: 1.5; - place-content: center; + justify-content: center; align-items: flex-end; - font-weight: 700; + align-content: center; + padding-top: .5rem; + font-weight: bold; font-size: 0.8rem !important; - padding: 0px !important; + padding: 0 !important; } .title-and-tips { @@ -8153,7 +9298,7 @@ span.recent-post-top-text { .title-and-tips .page-title { line-height: 1; - margin: 0px; + margin: 0; } .title-and-tips .page-tips { @@ -8166,12 +9311,15 @@ span.recent-post-top-text { margin-left: 8px; } + +/* 主页卡片阴影 */ #aside-content .card-widget { box-shadow: var(--heo-shadow-border); background: var(--heo-card-bg); border: var(--style-border); + transition: 0.3s; border-radius: 12px; - transition: all 0.3s ease 0s; + transition: 0.3s; position: relative; overflow: hidden; margin-top: 1rem; @@ -8208,12 +9356,13 @@ span.recent-post-top-text { flex-direction: row-reverse !important; } -#recent-posts > .recent-post-item.right .cover_radius, .recent-post-item.alternate.even .cover_radius{ +#recent-posts > .recent-post-item.right .cover_radius, .recent-post-item.alternate.even .cover_radius { border-radius: 0px 12px 12px 0px !important; } @media screen and (min-width: 1300px) { + #recent-posts > .recent-post-item { flex-direction: column; } @@ -8223,7 +9372,7 @@ span.recent-post-top-text { margin-top: 0.25rem; margin-bottom: 0.75rem; box-shadow: var(--heo-shadow-border); - clip-path: inset(0px round 12px); + clip-path: inset(0 0 0 0 round 12px); } #recent-posts > .recent-post-item:not(:first-child):active { @@ -8257,62 +9406,97 @@ span.recent-post-top-text { box-shadow: var(--heo-shadow-border); } + /* 首页文章第一个 */ #recent-posts { display: flex; flex-wrap: wrap; - place-content: flex-start space-between; + justify-content: space-between; align-items: flex-start; + align-content: flex-start; } } + +/* 主页卡片手机端美化 */ @media screen and (max-width: 768px) { #recent-posts > .recent-post-item { - border-radius: 0px; + border-radius: 0; } #recent-posts > .recent-post-item:not(:first-child) { - margin: 0.5rem 1rem 1.5rem; + margin: 1.5rem 1rem; border-radius: 12px; + margin-top: 0.5rem; border: var(--style-border-always); box-shadow: var(--heo-shadow-border); display: block; position: relative; - clip-path: inset(0px round 12px); + clip-path: inset(0 0 0 0 round 12px); } #recent-posts .recent-post-item .post_cover { + border-radius: 0 !important; width: 100%; - border-radius: 0px !important; } + #bbTimeList { + margin-top: 0; + border-radius: 0; + background: var(--heo-background); + padding: 0.5rem 20px; + } + + a.article-meta__categories { + left: 12px !important; + top: 12px !important; + border-radius: 4px !important; + padding: 2px 9px !important; + font-size: 12px; + } + + #bbTimeList { + margin-bottom: 0rem; + } } +/* 置顶卡片数量优化 */ @media screen and (min-width: 1300px) { .topGroup .recent-post-item:nth-child(7) { display: none; } } + +/* 手机端精简优化 */ @media screen and (max-width: 768px) { + + /* 边栏头像 */ #sidebar-menus > div.author-avatar { display: none; } + /* 文章标签 */ #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap { bottom: 0.5rem !important; } #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap time { - right: 0px; + display: absolute; + right: 0; } + /* 右下角设置按钮 */ + #rightside { + display: none; + } + /* 背景 */ #web_bg { - background: 0px 0px !important; + background: none !important; } #recent-posts > .recent-post-item .post_cover img.post_bg { - border-radius: 12px 12px 0px 0px !important; + border-radius: 12px 12px 0 0 !important; } #recent-posts > .recent-post-item .post_cover img.post_bg:hover { @@ -8327,13 +9511,44 @@ span.recent-post-top-text { transform: scale(1); } - #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap, #recent-posts > .recent-post-item > .recent-post-info > .article-title, - #recent-posts > .recent-post-item > .recent-post-info > .content { - padding: 0px 20px !important; + #recent-posts > .recent-post-item > .recent-post-info > .content, + #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap { + padding: 0 20px !important; } + } +/* 主页文章封面左侧显示 */ +/* #recent-posts>.recent-post-item .right_radius{ + order: 0; + border-radius: 8px 0 0 8px; +} */ + +/* 主页文章卡片尺寸变化 */ +/* #recent-posts > div:nth-child(1){ + height: 22em; +} +#recent-posts > div:nth-child(1) > div.recent-post-info > div.content{ + height: 120px; + margin-top: 20px!important; +} +#recent-posts > div:nth-child(4){ + height: 22em; +} +#recent-posts > div:nth-child(4) > div.recent-post-info > div.content{ + height: 120px; + margin-top: 20px!important; +} +#recent-posts > div:nth-child(8){ + height: 22em; +} +#recent-posts > div:nth-child(8) > div.recent-post-info > div.content{ + height: 120px; + margin-top: 20px!important; +} */ + +/* 自定义的文章分类 */ a.article-meta__categories { position: absolute; padding: 1px 6px; @@ -8341,32 +9556,35 @@ a.article-meta__categories { border-radius: 8px; margin-left: 0px; font-size: 12px; - font-weight: 700; + font-weight: bold; color: var(--heo-white); top: 8px; left: 8px; backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); } a.article-meta__categories:hover { - box-shadow: var(--heo-shadow-theme); background: var(--heo-theme) !important; color: var(--heo-white) !important; + box-shadow: var(--heo-shadow-theme); } +/* 文章卡片标题 */ #recent-posts > .recent-post-item > .recent-post-info > .article-title { line-height: 1.4; margin-top: 0px; - font-weight: 700; + font-weight: bold; color: var(--heo-fontcolor); margin-bottom: 0px; position: absolute; width: 100%; - left: 0px; - padding: 0px 40px; - transition: all 0.3s ease 0s; + left: 0; + padding: 0 40px; + transition: 0.3s; } + #recent-posts > .recent-post-item > .recent-post-info > .article-title:hover { color: var(--heo-fontcolor); } @@ -8389,11 +9607,14 @@ a.article-meta__categories:hover { } } +/* 文章卡片标签边距 */ .article-meta-wrap { color: var(--heo-secondtext) !important; } +/* 日期右侧显示 */ #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap > .post-meta-date { + /* display: none; */ right: 0px; text-align: right; } @@ -8414,17 +9635,18 @@ a.article-meta__categories:hover { margin-right: 0.8rem; } +/* 文章目录 */ #aside-content #card-toc .toc-content .toc-link.active { line-height: 1.2; border-radius: 12px; border-left-color: var(--heo-hovertext); background-color: var(--heo-card-bg); color: var(--heo-lighttext); - font-weight: 700; + font-weight: bold; font-size: 20px; } -[data-theme="dark"].toc .toc-item.active .toc-link .toc-text { +[data-theme=dark].toc .toc-item.active .toc-link .toc-text { color: var(--heo-white); } @@ -8446,7 +9668,7 @@ a.article-meta__categories:hover { opacity: 0.6; cursor: pointer; filter: blur(1px); - transition: all 0.3s ease 0s; + transition: 0.3s; } #aside-content #card-toc:hover .toc-content .toc-link:not(.active) span { @@ -8458,35 +9680,42 @@ a.article-meta__categories:hover { color: var(--heo-lighttext); } +/* 目录卡片边距 */ #card-toc { - padding: 0.5rem !important; + padding: 0.5rem 0.5rem !important; } +/* 不显示分割线 */ #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap .article-meta__separator { display: none; } .article-meta { - margin: 0px 8px 0px 0px; + margin: 0 8px 0 0; white-space: nowrap; overflow: hidden; display: inline-block; text-overflow: ellipsis; } +/* 不显示标签分割点 */ .article-meta__link { display: none; } .article-meta__tags { margin-right: 4px; - padding: 0px 0.2rem 0px 0px; + padding: 0 .2rem; + padding-left: 0; } +/* 多分类兼容性调整 */ #recent-posts > div > i .post_cover { display: none; } +/* 文章标签置底 */ + #recent-posts > .recent-post-item > .recent-post-info { height: 174px; width: 100%; @@ -8503,13 +9732,14 @@ a.article-meta__categories:hover { #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap { position: absolute; bottom: 16px; - transition: all 0.3s ease 0s; + transition: 0.3s; display: flex; - flex-flow: row nowrap; + flex-direction: row; + flex-wrap: nowrap; justify-content: space-between; width: 100%; - left: 0px; - padding: 0px 32px; + left: 0; + padding: 0 32px; white-space: nowrap; } @@ -8527,42 +9757,53 @@ a.article-meta__categories:hover { } } +/* 首页文章标签样式 */ #recent-posts > .recent-post-item > .recent-post-info > .article-meta-wrap a:hover { background-color: var(--heo-post-blockquote-bg); color: var(--heo-hovertext); } +/* 首页顶部banner区域 */ #home_top { max-width: 1400px; - margin: 0.5rem auto auto; - padding: 0px 1.5rem; + margin: auto; + margin-top: 0.5rem; + padding: 0 1.5rem; } @media screen and (max-width: 768px) { #home_top { - padding: 0px; - margin-top: 0px; + padding: 0; + margin-top: 0; } + + } +/* 热门标签提醒 */ + +/* sketch */ #aside-content .card-tag-cloud a[href*="/tags/Sketch/"] { - font-weight: 500; color: var(--heo-lighttext) !important; + font-weight: 500; } +/* 设计 */ #aside-content .card-tag-cloud a[href*="/tags/%E8%AE%BE%E8%AE%A1/"] { - font-weight: 500; color: var(--heo-lighttext) !important; + font-weight: 500; } +/* 干货 */ #aside-content .card-tag-cloud a[href*="/tags/%E5%B9%B2%E8%B4%A7/"] { - font-weight: 500; color: var(--heo-lighttext) !important; + font-weight: 500; } +/* 教程 */ #aside-content .card-tag-cloud a[href*="/tags/%E6%95%99%E7%A8%8B/"] { - font-weight: 500; color: var(--heo-lighttext) !important; + font-weight: 500; } #aside-content .card-tag-cloud a sup { @@ -8570,17 +9811,18 @@ a.article-meta__categories:hover { margin-left: 2px; } +/* 描述 */ #recent-posts > .recent-post-item > .recent-post-info > .content { line-height: 1.4; color: var(--heo-secondtext); margin-top: 0px; cursor: pointer; - transition: all 0.3s ease 0s; + transition: 0.3s; opacity: 1; position: absolute; width: 100%; - left: 0px; - padding: 0px 40px; + left: 0; + padding: 0 40px; } @media screen and (min-width: 768px) { @@ -8611,6 +9853,7 @@ a.article-meta__categories:hover { -webkit-line-clamp: 5 !important; } + /* 大文章高度 */ #recent-posts > .post-card-large { height: 20em !important; } @@ -8623,10 +9866,18 @@ a.article-meta__categories:hover { } } +/* +#recent-posts > .recent-post-item >.recent-post-info > .content:hover{ + opacity: 0.8; + transition: 0.3s; +} */ + +/* 描述行数限制 */ #recent-posts > .recent-post-item > .recent-post-info > .content { -webkit-line-clamp: 2; } +/* 作者打招呼 */ div#author-info__sayhi { text-align: left; color: var(--heo-white); @@ -8640,7 +9891,7 @@ div#author-info__sayhi { #aside-content .card-info .author-info__name { text-align: left; - font-weight: 700; + font-weight: bold; color: var(--heo-white); font-size: 28px; line-height: 1.1; @@ -8648,24 +9899,37 @@ div#author-info__sayhi { margin-bottom: 1rem; } +/* 作者卡片背景 */ #aside-content > .card-widget:first-child { - transition: all 0.3s ease 0s; + transition: 0.3s; border: none; box-shadow: none; background: var(--heo-main); margin-top: 0px; } + #aside-content > .card-widget.card-info { - background-size: 400%; + background: var(--heo-card-bg); box-shadow: var(--heo-shadow-black); - animation: 15s ease 0s infinite normal none running gradient; position: relative; } +#aside-content > .card-widget.card-info::before { + background: linear-gradient(-25deg, var(--heo-main), var(--heo-main-op-deep), var(--heo-main), var(--heo-main-op-deep)); + background-size: 400%; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + content: ''; + animation: gradient 15s ease infinite; +} + @keyframes gradient { 0% { - background-position: 0px 50%; + background-position: 0% 50%; } 50% { @@ -8673,19 +9937,21 @@ div#author-info__sayhi { } 100% { - background-position: 0px 50%; + background-position: 0% 50%; } } + @media screen and (max-width: 1300px) { #aside-content > .card-widget:first-child { min-height: 329px; } } +/* 作者卡片描述 */ #aside-content > div.card-widget.card-info > div > div.card-info-avatar.is-center > div.author-info__description { line-height: 1.38; - margin: 0.3rem 0px; + margin: .3rem 0; text-align: justify; color: rgba(255, 255, 255, 0.8); } @@ -8694,9 +9960,10 @@ div#author-info__sayhi { color: var(--heo-white); } +/* 作者卡片描述2 */ .author-info__description2 { line-height: 1.38; - margin: 0.3rem 0px; + margin: .3rem 0; text-align: justify; width: 100%; z-index: 2; @@ -8722,7 +9989,7 @@ div#author-info__sayhi { display: flex; align-items: center; z-index: 1; - transition: all 0.3s ease 0s; + transition: 0.3s; cursor: pointer; } @@ -8736,44 +10003,49 @@ div#author-info__sayhi { font-size: 1rem; } + +/* 头像背景 */ +/* 隐藏文章数等信息 */ #aside-content .card-info .card-info-data { display: none; } +/* 作者头像 */ #aside-content .card-info a img { border-radius: 0px; height: 200px; display: inherit; - filter: drop-shadow(rgba(0, 0, 0, 0.03) -5px 14px 8px); + filter: drop-shadow(-5px 14px 8px #00000008); position: absolute; right: -24px; bottom: -82px; width: auto; z-index: 0; - transition: all 0.3s cubic-bezier(0.48, -0.21, 0, 1.5) 0s; + transition: cubic-bezier(0.48, -0.21, 0, 1.5) 0.3s; } #aside-content .card-info a img:hover { bottom: -42px; } -[data-theme="light"] #aside-content .card-info a img { - filter: drop-shadow(rgba(255, 255, 255, 0.03) -5px 14px 8px); +[data-theme=light] #aside-content .card-info a img { + filter: drop-shadow(-5px 14px 8px #ffffff08); } .card-widget.card-info { - padding: 0px !important; + padding: 0 !important; } #aside-content > div.card-widget.card-info > div.card-content { padding: 1rem 1.2rem; min-height: 330px; + position: relative; } #aside-content > div.card-widget.card-info > div.card-info-avatarimg { overflow: hidden; background: var(--heo-yellow); - transition: all 1.5s ease 0s; + transition: 1.5s; min-height: 160px; position: relative; box-shadow: var(--heo-shadow-yellow); @@ -8783,6 +10055,17 @@ div#author-info__sayhi { transform: scale(1.03); } +/* 作者文章列表链接 */ +#aside-content > div.card-widget.card-info > div > div.card-info-data > div:nth-child() > a > div.headline { + font-weight: bold; +} + +/* 作者名称和头像间距 */ +/* #aside-content .card-info .author-info__name{ + padding-top: 30px; +} */ + +/* pad端隐藏部分侧边栏 */ @media screen and (max-width: 900px) { #aside-content .card-announcement { display: none; @@ -8793,16 +10076,18 @@ div#author-info__sayhi { } } +/* 社交按钮 */ #aside-content .card-info #card-info-btn { display: none; } #aside-content .card-info .card-info-social-icons { - margin: 0px; + margin: 0; padding-top: 10px; display: flex; justify-content: flex-start; - flex-flow: row wrap; + flex-direction: row; + flex-wrap: wrap; cursor: pointer; position: absolute; bottom: 1rem; @@ -8810,7 +10095,8 @@ div#author-info__sayhi { } #aside-content .card-info .card-info-social-icons .social-icon { - margin: 0px 8px 0px 0px; + margin: 0; + margin-right: 8px; } #aside-content .card-info .card-info-social-icons i { @@ -8842,7 +10128,7 @@ div#author-info__sayhi { color: var(--heo-white); } - [data-theme="dark"] #aside-content .card-info .card-info-social-icons i { + [data-theme=dark] #aside-content .card-info .card-info-social-icons i { color: var(--heo-white); } } @@ -8857,16 +10143,18 @@ div#author-info__sayhi { color: var(--heo-blue); } +/* 公告 */ .announcement_content p { - margin: 0.5rem 0px 0px; + margin: 0.5rem 0 0 0; line-height: 1.38; } +/* 卡片标题 */ #aside-content .item-headline { - padding-bottom: 0px; + padding-bottom: 0; margin-left: 8px; font-size: 1em; - font-weight: 700; + font-weight: bold; } #aside-content .item-headline i { @@ -8875,7 +10163,7 @@ div#author-info__sayhi { #aside-content .item-headline + div, #aside-content .item-headline + ul { - padding: 0px; + padding: 0; } @media screen and (min-width: 1300px) { @@ -8890,32 +10178,33 @@ div#author-info__sayhi { } } +/* 卡片根据时间查看文章底部查看更多按钮 */ #aside-content > div.sticky_layout > div.card-widget.card-archives > div > ul > li.card-archive-list-item.more.is-center { margin-top: 8px; background: var(--heo-card-btn-bg); border-radius: 8px; - transition: all 0.3s ease 0s !important; + transition: 0.3s !important; } #aside-content > div.sticky_layout > div.card-widget.card-archives > div > ul > li.card-archive-list-item.more.is-center :hover { color: var(--heo-white); background: var(--heo-blue); border-radius: 8px; - transition: all 0.3s ease 0s !important; + transition: 0.3s !important; } #aside-content .card-archives ul.card-archive-list > .card-archive-list-item.more span, #aside-content .card-categories ul.card-category-list > .card-category-list-item.more span { - transition: all 0.3s ease 0s !important; + transition: 0.3s !important; } #aside-content .card-archives ul.card-archive-list > .card-archive-list-item:hover.more span, #aside-content .card-categories ul.card-category-list > .card-category-list-item.more span { - transition: all 0.3s ease 0s !important; + transition: 0.3s !important; } #aside-content > div.sticky_layout > div.card-widget.card-archives > div > ul > li.card-archive-list-item.more.is-center :hover span { - background: 0px 0px; + background: none; } #web_bg { @@ -8930,42 +10219,44 @@ div#author-info__sayhi { background-color: var(--heo-background); } -#web_bg::before { - opacity: 1; +#web_bg:before { background-color: var(--heo-background) !important; + opacity: 1; } -[data-theme="dark"] #footer::before, -[data-theme="dark"] #page-header::before, -[data-theme="dark"] #web_bg::before { +[data-theme='dark'] #web_bg:before, +[data-theme='dark'] #footer:before, +[data-theme='dark'] #page-header:before { background-color: var(--heo-none) !important; } -[data-theme="dark"]#web_bg { +[data-theme=dark]#web_bg { opacity: 1; } +/* 标签云卡片 */ #aside-content .card-tag-cloud a { + color: var(--heo-fontcolor) !important; font-size: 0.8rem; border-radius: 8px; - color: var(--heo-fontcolor) !important; } #aside-content .card-tag-cloud a:hover { background: var(--heo-theme); - box-shadow: var(--heo-shadow-theme); color: var(--heo-white) !important; + box-shadow: var(--heo-shadow-theme); } #aside-content .card-tag-cloud a.tags-cloud-more { width: 100%; text-align: center; + border-radius: 8px !important; border: var(--style-border); margin-top: 8px; - border-radius: 8px !important; font-size: var(--global-font-size) !important; } + @media screen and (min-width: 1300px) { #aside-content .card-tag-cloud a:hover { transform: scale(1.03); @@ -8976,6 +10267,7 @@ div#author-info__sayhi { } } +/* 时间轴卡片 */ #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover, #aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover { color: var(--heo-white); @@ -8986,6 +10278,7 @@ div#author-info__sayhi { border: var(--style-border-hover); } + @media screen and (min-width: 1300px) { #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover, @@ -8999,18 +10292,19 @@ div#author-info__sayhi { } } +/* 翻页 */ a.extend.next { - right: 0px; + right: 0; } a.extend.prev { - left: 0px; + left: 0; } @media screen and (max-width: 768px) { #pagination { - margin-bottom: 0px; - margin-top: 0px; + margin-bottom: 0rem; + margin-top: 0; } } @@ -9024,8 +10318,13 @@ a.extend.prev { display: none; } -#page-header.post-bg::before { - transition: all 0s ease 0s; +/* 文章页 +---------------------------------------------------------------- */ + +/* 文章头图 */ +#page-header.post-bg:before { + transition: 0s; + opacity: 0.93; height: 20rem; background-color: var(--heo-main); opacity: 0.8; @@ -9033,11 +10332,11 @@ a.extend.prev { @media screen and (max-width: 768px) { #page-header.post-bg { - margin-bottom: -12px; height: 30rem !important; + margin-bottom: -12px; } - #page-header.post-bg::before { + #page-header.post-bg:before { height: 15rem; } @@ -9057,7 +10356,7 @@ a.extend.prev { height: 25rem; } - #page-header.post-bg::before { + #page-header.post-bg:before { height: 25rem; } @@ -9068,8 +10367,9 @@ a.extend.prev { } #page-header.post-bg { + /* backdrop-filter: blur(500px); */ background-color: var(--heo-main); - transition: all 0s ease 0s; + transition: 0s; overflow: hidden; box-shadow: var(--heo-shadow-main); } @@ -9087,8 +10387,9 @@ a.extend.prev { width: 70%; height: 100%; position: relative; - margin: 0px -20% 0px auto; + margin: 0 -20% 0 auto; overflow: hidden; + margin-bottom: 0; transform: rotate(10deg) translateY(-10%) scale(2); filter: blur(10px); } @@ -9097,20 +10398,20 @@ a.extend.prev { display: block; } -.coverdiv::after { +.coverdiv:after { position: absolute; - content: ""; + content: ''; width: 100%; height: 100%; - top: 0px; - left: 0px; + top: 0; + left: 0; box-shadow: 110px -130px 300px 60px var(--heo-main) inset; } @media screen and (max-width: 768px) { .coverdiv { - margin: 0px 0px 0px auto; - transform: rotate(0deg) translateY(0px) scale(1); + margin: 0 0 0 auto; + transform: rotate(0deg) translateY(0) scale(1); filter: blur(0px); width: 100%; position: fixed; @@ -9118,24 +10419,27 @@ a.extend.prev { z-index: 1; } - .coverdiv::after { - box-shadow: 0 0 205px 59px var(--heo-main) inset; + .coverdiv:after { + box-shadow: 0px 0px 205px 59px var(--heo-main) inset; } + } #page-header { + background-image: none !important; display: flex; justify-content: center; - background-image: none !important; } +/* 顶部遮罩 */ #post-cover-rgb { position: absolute; - background: var(--heo-lighttext); width: 100% !important; height: 100% !important; + background: var(--heo-lighttext); } +/* 文章背景阴影 */ .layout > div:first-child:not(.recent-posts) { box-shadow: var(--heo-shadow-border); padding: 1rem 2rem; @@ -9159,20 +10463,20 @@ a.extend.prev { @media screen and (max-width: 768px) { .layout > div:first-child:not(.recent-posts) { - border-radius: 0px; - background: var(--heo-background); - padding: 0px 1rem !important; + border-radius: 0; + padding: 0rem 1rem !important; box-shadow: none !important; + background: var(--heo-background); } .layout { - padding: 0px 1.5rem; + padding: 0 1.5rem; } } @media screen and (max-width: 768px) { .layout { - padding: 0px; + padding: 0; } .layout > div:first-child:not(.recent-posts) { @@ -9180,7 +10484,7 @@ a.extend.prev { } .post .layout > div:first-child:not(.recent-posts) { - border-radius: 12px 12px 0px 0px; + border-radius: 12px 12px 0 0; } .post .layout#content-inner { @@ -9194,7 +10498,7 @@ a.extend.prev { #aside-content { z-index: 2; background: var(--heo-background); - padding: 0px 1rem; + padding: 0 1rem; display: flex; flex-direction: column; width: 100%; @@ -9205,15 +10509,28 @@ a.extend.prev { max-width: 1400px; } +/* 隐藏主页头图 */ .full_page #post-cover { display: none; } +/* @keyframes postheadimg { + from { + backdrop-filter: blur(0px); + background-color: rgba(0,0,0,0.2); + } + + to { + backdrop-filter: blur(300px); + background-color: rgba(0,0,0,0.2); + } */ + +/* 文章头部 */ #page-header #post-info { - top: 0px; + top: 0; position: absolute; - padding: 0px 3rem; - margin: 0px auto; + padding: 0 3rem; + margin: 0 auto; z-index: 10; color: var(--heo-white); max-width: 1400px; @@ -9226,25 +10543,38 @@ a.extend.prev { @media screen and (max-width: 768px) { #page-header #post-info { - padding: 18rem 6% 0px; + padding: 0 6%; justify-content: normal; + padding-top: 18rem; } } @media screen and (min-width: 1300px) { #page-header #post-info { height: calc(100% + 30px); - top: 0px; + top: 0; display: flex; justify-content: center; } } #post-info #post-meta > .meta-secondline > span:first-child { - display: inline; margin-right: 0.8rem; } +.meta-secondline span { + display: flex; + align-items: center; + line-height: 1; +} + +@media screen and (max-width: 768px) { + .meta-secondline span { + line-height: 1.5; + } +} + +/* 文章时间分类信息 */ #post-firstinfo { text-align: left; display: flex; @@ -9264,11 +10594,11 @@ a.extend.prev { span.post-meta-categories { background-color: var(--heo-white-op); - padding: 0px 0.5rem; + padding: 0 0.5rem; border-radius: 8px; line-height: 32px; height: 32px; - transition: all 0.3s ease 0s; + transition: 0.3s; } span.post-meta-categories:not(:first-child) { @@ -9303,6 +10633,7 @@ span.post-meta-categories:hover a.post-meta-categories { } } +/* 文章作者信息和时间 */ .meta-avatar img { width: 30px; border-radius: 30px; @@ -9310,15 +10641,15 @@ span.post-meta-categories:hover a.post-meta-categories { } a.post-meta-original { - padding: 0px 0.5rem; + background: var(--heo-white-op) !important; + color: var(--heo-white) !important; + padding: 0 0.5rem; font-size: 0.7rem; margin: auto; border-radius: 8px; - font-weight: 700; + font-weight: bold; height: 32px; line-height: 32px; - background: var(--heo-white-op) !important; - color: var(--heo-white) !important; } a.post-meta-original:hover { @@ -9337,19 +10668,17 @@ a.post-meta-original:hover { } #post-info #post-meta { - display: flex; - margin: 0px auto; z-index: 1; } - #post-info::after { + #post-info:after { position: absolute; - content: ""; + content: ''; width: 100%; height: 100%; - bottom: 0px; - left: 0px; - box-shadow: 0 -214px 287px 45px var(--heo-main) inset; + bottom: 0; + left: 0; + box-shadow: 0px -214px 287px 45px var(--heo-main) inset; z-index: 0; } @@ -9371,13 +10700,14 @@ a.post-meta-original:hover { #post-firstinfo { white-space: nowrap; - margin: 0px auto; + margin: 0 auto; z-index: 1; } .meta-firstline .tag_share { display: none; } + } .post-meta__tag-list::-webkit-scrollbar { @@ -9385,13 +10715,13 @@ a.post-meta-original:hover { } .meta-share-time a:hover { - background: 0px 0px !important; + background: none !important; } .meta-share-time .meta-avatar-name { opacity: 1; - font-weight: 700; color: var(--heo-white) !important; + font-weight: bold; } .meta-share-time { @@ -9399,13 +10729,15 @@ a.post-meta-original:hover { } .meta-share-time .meta-info { - margin: 0px 0.5rem; + margin: 0 0.5rem; } .meta-secondline { - flex-flow: row wrap; + display: flex; + flex-direction: row; + flex-wrap: wrap; justify-content: flex-start; - display: flex !important; + align-items: center; } .meta-avatar { @@ -9413,21 +10745,30 @@ a.post-meta-original:hover { } .meta-avatar .meta-avatar-name { - margin: 0px 0.5rem; + margin: 0 0.5rem; } +/* 热度图标 */ #post-info #post-meta .fab { margin-bottom: 3px; font-size: 15px; } +/* 热度间隔 */ span.post-meta-pv-cv { margin-left: 0.8rem; } +/* 微信公众号同步 */ span.post-meta-wechat { margin-right: 0.8rem; opacity: 0.6; + transition: 0.3s; + cursor: pointer; +} + +.post-meta-wechat:hover { + opacity: 1; } span.post-meta-position { @@ -9435,18 +10776,22 @@ span.post-meta-position { opacity: 0.6; } +/* 隐藏信息文字 */ #post-info #post-meta .post-meta-label { display: none; } +/* 图标数字间距 */ #post-info #post-meta .post-meta-icon { margin-right: 0.4rem; } +/* 每组间距 */ #post-info #post-meta .post-meta-separator { margin: 0px 0.4rem; } +/* 文章信息数值 */ .post-meta-pv-cv #busuanzi_value_page_pv { font-weight: 800; } @@ -9463,13 +10808,14 @@ span.post-meta-position { font-weight: 800; } +/* 文章信息透明度 */ .post-meta-wordcount { opacity: 0.6; } @media screen and (max-width: 768px) { .post-meta-wordcount { - margin-left: 0px; + margin-left: 0; } } @@ -9488,6 +10834,12 @@ span.post-meta-position { .post-meta-commentcount { opacity: 0.6; + cursor: pointer; + transition: 0.3s; +} + +.post-meta-commentcount:hover { + opacity: 1; } #twikoo-count { @@ -9503,6 +10855,7 @@ span.post-meta-position { margin-right: 0.5rem; } +/* 文章内图片保持一行 */ .inline-image { display: flex; margin: 8px auto; @@ -9511,39 +10864,39 @@ span.post-meta-position { } .inline-image a:hover { - background: 0px 0px !important; + background: none !important; box-shadow: none !important; } .inline-image img { - margin-top: 0px; - margin-right: 0px; - margin-left: 0px; + margin: 0; display: inline-flex; - margin-bottom: 0px !important; + margin-bottom: 0 !important; } +/* 文章标题 */ #post-info .post-title { color: var(--heo-white); font-weight: 700; font-size: 2.3rem; line-height: 1.2; text-align: left; + margin: 1rem 0 1rem 0 !important; -webkit-line-clamp: 2; - padding: 0px; - margin: 1rem 0px !important; + padding: 0; } @media screen and (max-width: 768px) { #post-info .post-title { font-size: 1.2rem; -webkit-line-clamp: 3; + margin: 0.2rem auto !important; text-align: center; z-index: 1; - margin: 0.2rem auto !important; } } +/* 文章顶部其他信息 */ #post-meta > div { text-align: left; } @@ -9551,41 +10904,44 @@ span.post-meta-position { #post-info #post-meta { color: var(--heo-white); margin-top: 0.4rem; - height: 30px; - transition: all 0.3s ease 0s; + transition: 0.3s; + display: flex; } #post-info #post-meta a { text-decoration: none; color: var(--heo-fontcolor); - height: 30px; + line-height: 1; } #post-info #post-meta a:hover { text-decoration: none; color: var(--heo-blue); - border-radius: 12px; + border-radius: 12px } -#article-container h1::before, -#article-container h2::before, -#article-container h3::before, -#article-container h4::before, -#article-container h5::before, -#article-container h6::before { - top: calc(50% - 0.45rem); - content: ""; +/* 文章标题前图标 */ +#article-container h1:before, +#article-container h2:before, +#article-container h3:before, +#article-container h4:before, +#article-container h5:before, +#article-container h6:before { + top: calc(50% - .45rem); + content: ''; } -#article-container h1:hover::before, -#article-container h2:hover::before, -#article-container h3:hover::before, -#article-container h4:hover::before, -#article-container h5:hover::before, -#article-container h6:hover::before { +/* 文章标题前图标悬浮 */ +#article-container h1:hover:before, +#article-container h2:hover:before, +#article-container h3:hover:before, +#article-container h4:hover:before, +#article-container h5:hover:before, +#article-container h6:hover:before { color: var(--heo-lighttext); } +/* 标题悬浮效果 */ #article-container h1:hover, #article-container h2:hover, #article-container h3:hover, @@ -9595,100 +10951,153 @@ span.post-meta-position { padding-left: 1.3rem; } -#article-container ul > li:not(.tab)::before { +/* 文章tab样式 */ +#article-container ul > li:not(.tab):before { border: 0.21em solid var(--heo-lighttext); background: var(--heo-lighttext); } #article-container ol, #article-container ul { - padding: 0px; + padding: 0; } #article-container .tabs { + margin: 1rem 0 !important; border-radius: 12px; overflow: hidden; box-shadow: var(--heo-shadow-border); - margin: 1rem 0px !important; + padding: 8px; + background: var(--heo-card-bg); + border: var(--style-border); } #article-container .tabs .nav-tabs { - background: var(--heo-secondbg); + background: var(--heo-card-bg); + padding: 16px; + display: flex; + justify-content: center; + flex-wrap: wrap; + flex-direction: row; +} + +@media screen and (max-width: 768px) { + #article-container .tabs .nav-tabs { + padding: 0; + margin-bottom: 8px; + } } #article-container .tabs > .nav-tabs > .tab.active button { - border-top: 0 solid var(--heo-lighttext); - border-bottom: 3px solid var(--heo-lighttext); + border: var(--style-border-hover-always); background: var(--heo-background); -} - -#article-container .tabs > .nav-tabs > .tab:not(.active) button:hover { - border-bottom: 3px solid var(--heo-secondbg); - border-top: none !important; + border-radius: 8px; } #article-container .tabs > .nav-tabs > .tab button { + transition: all 0s; + -webkit-transition: all 0s; background: var(--heo-secondbg); - transition: all 0.3s ease 0s; - border-top: none; - border-bottom: 3px solid var(--heo-secondbg); + transition: 0.3s; + border: var(--style-border-always); + border-radius: 8px; + font-size: 14px; + padding: 8px 16px; + display: block; + line-height: 1; + width: 100%; + color: var(--heo-fontcolor); } #article-container .tabs > .nav-tabs > .tab:not(.active) button:hover { background: var(--heo-main); color: var(--heo-white); - transition: all 0.3s ease 0s; - border-top: 3px solid var(--heo-main); + transition: 0.3s; + border: var(--style-border-hover-always); } .tab-item-content { background: var(--heo-card-bg); } +/* tab边框 */ #article-container .tabs { border: 3px solid var(--heo-secondbg) !important; } + +/* 切换tab标签 */ #article-container .tabs > .tab-contents .tab-item-content.active { - animation: 0s ease 0s 1 normal none running tabshow; - padding: 1.2rem; + animation: tabshow 0s; + -webkit-animation: tabshow 0s; + padding: 1.2rem 1.2rem; + border-radius: 8px; } @media screen and (max-width: 768px) { #article-container .tabs > .tab-contents .tab-item-content.active { - padding: 0.5rem; + padding: 0.5rem 0.5rem; } } +.tab-contents { + border-radius: 8px; + overflow: hidden; +} + +/* 文章details折叠 */ details { + display: block; + position: relative; margin-bottom: 1rem; + min-height: 54px; + overflow: hidden; } details summary { + position: absolute; padding: 0.5rem 1rem; background: var(--heo-card-bg); border-radius: 12px; - margin: 0.2rem 0px; - transition: all 0.3s ease 0s; + margin: 0; + transition: 0.3s; border: var(--style-border); box-shadow: var(--heo-shadow-border); + position: absolute; + left: 0; + width: 100%; +} + +details > *:nth-child(2) { + margin-top: calc(54px + 1rem) !important; +} + +details[open] summary { + border-radius: 12px 12px 0 0; + background: var(--heo-main); + color: var(--heo-white); + border: var(--style-border-hover-always); } details summary:hover { cursor: pointer; background: var(--heo-main); color: var(--heo-white); - transition: all 0.3s ease 0s; + transition: 0.3s; box-shadow: var(--heo-shadow-main); } details summary:focus { - outline: 0px; + outline: none; } details summary::marker { color: var(--heo-main); - transition: all 0.3s ease 0s; + transition: 0.3s; +} + +details[open] summary::marker { + color: var(--heo-white); } details summary:hover::marker { @@ -9697,32 +11106,44 @@ details summary:hover::marker { details[open] { border-radius: 12px; - border: var(--style-border); - padding: 0px 1.5rem; + border: var(--style-border-hover-always); + padding: 0 1.5rem; background: var(--heo-card-bg); } +details summary:hover:after { + position: absolute; + content: '+'; + text-align: center; + top: calc(50% - 2px); + transform: translateY(-50%); + right: 16px; + line-height: 1; +} + +details[open] > summary:hover:after { + content: '-'; +} + @media screen and (max-width: 768px) { details[open] { - padding: 0px; + padding: 0; } } -details[open] summary { - display: none; -} - -#article-container ul > li:not(.tab):hover::before { +/* 文章点样式 */ +#article-container ul > li:not(.tab):hover:before { border-color: var(--heo-none); } +/* 文章中的超链接 */ #article-container a { text-decoration: none; border-bottom: 2px solid var(--heo-lighttext); color: var(--heo-fontcolor); - font-weight: 700; - padding: 0px 4px; - border-radius: 4px 4px 0px 0px; + font-weight: bold; + padding: 0 4px; + border-radius: 4px 4px 0 0; } #article-container a:not(.fancybox):hover { @@ -9735,8 +11156,8 @@ details[open] summary { } #article-container a.fancybox { - border-bottom: 0px; - padding: 0px; + border-bottom: 0; + padding: 0; margin: auto; display: contents; width: fit-content; @@ -9747,22 +11168,37 @@ details[open] summary { } .site-card-avatar a.fancybox { - padding: 0px !important; + padding: 0 !important; } #article-container p { - margin: 1rem 0px; + margin: 1rem 0; text-align: left; letter-spacing: 0.6px; } +/*#article-container code {*/ +/* color: var(--heo-white);*/ +/* padding: 0.2rem 0.4rem;*/ +/* border-radius: 4px;*/ +/* margin: 0px 4px;*/ +/* background: var(--heo-pink);*/ +/* line-height: 2;*/ +/* box-shadow: var(--heo-shadow-border);*/ +/*}*/ + +/*#article-container code::selection {*/ +/* background: var(--heo-main) !important;*/ +/*}*/ + +/* 文章表格间距 */ .table-wrap { margin: 1rem 0px; border-radius: 8px; } -table td, -table th { +table th, +table td { border: var(--style-border-always); } @@ -9770,11 +11206,13 @@ table thead { background: var(--heo-secondbg); } +/* 文章中的加粗文本颜色 */ b, strong { color: var(--heo-lighttext); } +/* 文章字号 */ #article-container p { font-size: 0.9rem; line-height: 1.7; @@ -9785,19 +11223,12 @@ strong { #article-container.post-content h2, #article-container.post-content h3, #article-container.post-content h4 { - /*display: flex;*/ + display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; } -#article-container.post-content h1 strong, -#article-container.post-content h2 strong, -#article-container.post-content h3 strong, -#article-container.post-content h4 strong { - color: var(--text-highlight-color); -} - #article-container.post-content h1 { font-size: 1.5rem; line-height: 1.3; @@ -9816,7 +11247,7 @@ strong { } #article-container.post-content h4 { - font-size: 1rem; + font-size: 1.0rem; line-height: 1.3; } @@ -9826,6 +11257,8 @@ strong { } } +/* 外挂标签 */ + .note.warning:not(.no-icon):not(.modern)::before { display: flex; align-items: center; @@ -9838,16 +11271,19 @@ strong { border-width: 1px; border-color: var(--heo-yellow); box-shadow: var(--heo-shadow-border); + background: var(--card-bg); } +/* 链接外挂标签 */ #article-container .tag-Link { background: var(--heo-secondbg); + border-radius: 8px !important; display: flex; + border: var(--style-border); flex-direction: column; padding: 0.5rem 1rem; - margin-top: 1rem; - border-radius: 8px !important; border-width: 1px !important; + margin-top: 1rem; } #article-container .tag-Link:hover { @@ -9859,7 +11295,7 @@ strong { padding-bottom: 4px; font-size: 0.6rem; color: var(--heo-gray); - font-weight: 400; + font-weight: normal; pointer-events: none; } @@ -9879,9 +11315,10 @@ strong { width: 60px; min-width: 60px; height: 60px; - border-radius: 60px; - pointer-events: none; background-size: cover !important; + border-radius: 60px; + background: var(--heo-card-bg); + pointer-events: none; } #article-container .tag-Link .tag-link-bottom .tag-link-right { @@ -9898,7 +11335,7 @@ strong { #article-container .tag-Link .tag-link-bottom .tag-link-right .tag-link-sitename { font-size: 0.7rem; color: var(--heo-gray); - font-weight: 400; + font-weight: normal; margin-top: 4px; pointer-events: none; } @@ -9913,6 +11350,7 @@ strong { pointer-events: none; } +/* 文章标题 */ h1, h2, h3, @@ -9920,65 +11358,148 @@ h4, h5, h6 { margin-top: 1rem; - padding-top: 0px; - padding-left: 0px !important; + padding-top: 0; + padding-left: 0 !important; + font-weight: weight; } #post h2 { margin-top: 1.5rem; } -#article-container > h1:nth-child(1), -#article-container > h2:nth-child(1) { - margin: 0px; +#article-container > h2:nth-child(1), +#article-container > h1:nth-child(1) { + margin: 0; } -#aside-content #card-toc .toc-content::before { +/* 隐藏阅读进度 */ +#aside-content #card-toc .toc-content:before { display: none; } +/* 文章引用 */ blockquote { border: var(--style-border-always); background-color: var(--heo-secondbg); color: var(--heo-secondtext); border-radius: 8px; - margin: 1rem 0px; + margin: 1rem 0; padding: 0.5rem 0.8rem; } blockquote p { - padding: 0px; + padding: 0; } +/* readmore插件 */ +/* +[data-theme=dark] #read-more-mask{ + background: -webkit-gradient(linear, 0 0%, 0 100%, from(rgba(29, 30, 31, 0)), to(rgb(29, 30, 31)))!important; +} + +#read-more-btn{ + background: var(--heo-blue)!important; + border: 0px solid var(--heo-white) !important; + color: var(--heo-white) !important; + text-decoration: none!important; + font-weight:bold!important; + border-radius: 8px!important; +} + +#read-more-btn:hover{ + background: var(--heo-white) !important; + color: var(--heo-blue)!important; +} + +#btw-modal { + background: rgb(29, 30, 31)!important; +} + +#btw-modal img { + border: 8px solid rgb(0, 0, 0)!important; + border-radius: 8px!important; +} + +#btw-modal-header{ + margin-top: 0!important; + color: #fff !important; + margin: 2rem 0 1rem 0!important; +} + +#btw-modal-header strong{ + color: var(--heo-lighttext)!important; +} + +#btw-modal-input-code{ + background: rgb(29, 30, 31)!important; + margin-bottom: 50px; +} + +#btw-submit-btn{ + background: rgb(66, 123, 238)!important; + border-radius: 8px!important; + color: #fff !important; + font-weight:bold!important; +} + +#btw-submit-btn:hover{ + background: #fff !important; + color: rgb(66, 123, 238)!important; +} + +#btw-modal-input{ + color: #fff!important; + border-radius: 8px!important; + background: rgb(29, 30, 31)!important; +} + +#btw-modal-close-btn{ + color: rgb(129, 132, 136)!important; +} + +#btw-footer{ + display: none; +} + +#btw-mask{ + backdrop-filter: blur(3px); +} */ + +/* 文章内标题 */ #article-container .headerlink::before { - content: ""; + content: "\f0c1"; font-family: "Font Awesome 5 Free"; } #article-container .headerlink { float: right; opacity: 0.08; + border-bottom-style: none; + border-bottom: none; position: relative; padding: 0px; border: none; + border-radius: 8px !important; line-height: 1; font-size: 1rem; - border-radius: 8px !important; } #article-container .headerlink:hover { + background: none !important; opacity: 1; - text-decoration: none; - background: 0px 0px !important; border-bottom: none !important; box-shadow: none !important; + background: var(--heo-none); color: var(--heo-lighttext) !important; + text-decoration: none; } +/* 文章边栏 */ #sidebar { background: var(--heo-maskbg); } +/* 文章图片 */ #article-container img { border-radius: 12px; margin-bottom: 0.5rem; @@ -9986,24 +11507,35 @@ blockquote p { } #article-container img.error { - content: url(../images/404.gif); + content: url("https://img.zhheo.com/i/2022/08/31/630efd3d82799.webp"); } +/* 文章视频 */ .doge-inner-player { border-radius: 12px !important; } -#article-container ol li::before, -#article-container ul li::before { +/* 文章数字头 */ +#article-container ol li:before, +#article-container ul li:before { background: var(--heo-theme); cursor: default; } -#article-container ol li:hover::before, -#article-container ul li:hover::before { +#article-container ol li:hover:before, +#article-container ul li:hover:before { transform: rotate(0deg); } +/* 文章代码框 */ +/*figure {*/ +/* margin-top: 0.5rem !important;*/ +/*}*/ + +/*#article-container figure.highlight .highlight-tools {*/ +/* background: var(--heo-secondbg) !important;*/ +/*}*/ + #article-container .gutter { opacity: 0.6; } @@ -10012,44 +11544,72 @@ blockquote p { margin-left: 6px; } -#article-container .highlight-tools .code-lang { - text-transform: capitalize; - left: 1.9rem; -} +/*#article-container .highlight-tools .code-lang {*/ +/* text-transform: capitalize;*/ +/* left: 1.9rem;*/ +/*}*/ +/*#article-container figure.highlight table::-webkit-scrollbar {*/ +/* color: var(--heo-blue);*/ +/* background: var(--heo-secondbg);*/ +/* height: 8px;*/ +/*}*/ + +/*#article-container figure.highlight table::-webkit-scrollbar-thumb {*/ +/* background: var(--heo-gray);*/ +/*}*/ + +/*#article-container figure.highlight table::-webkit-scrollbar-thumb:hover {*/ +/* background: var(--heo-main);*/ +/*}*/ + +/* 代码展开图标 */ #article-container .code-expand-btn i { + color: var(--heo-fontcolor); font-size: 1rem; - color: var(--heo-white) !important; } #article-container .code-expand-btn { + background-color: var(--heo-mask); background: var(--heo-secondbg); - transition: all 0.3s ease 0s; + transition: 0.3s; backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); } #article-container .code-expand-btn:hover { background: var(--heo-main); } +#article-container .code-expand-btn:hover i { + color: var(--heo-white); +} + +/* 结尾寄语 */ #readmore-talk { text-align: center; color: var(--heo-lighttext); padding: 8px; border-radius: 12px; - background: rgba(242, 185, 75, 0.047); + background: #f2b94b0c; } +/* 相关推荐 */ +/* .relatedPosts>.relatedPosts-list>div { + border-radius: 12px; +} */ + .relatedPosts > .relatedPosts-list .cover::after { - content: " "; + content: ' '; display: block; position: absolute; z-index: 0; - top: 0px; - left: 0px; + top: 0; + left: 0; width: 100%; height: 100%; - background: url(../images/404.gif) 0% 0% / 100% 100%; + background: url('https://img.zhheo.com/i/2022/08/31/630efd3d82799.webp') 50%; + background-size: cover; } .relatedPosts > .relatedPosts-list a { @@ -10060,7 +11620,7 @@ blockquote p { @media screen and (min-width: 768px) { #post > div.relatedPosts > div.relatedPosts-list > div { - -webkit-mask-image: -webkit-radial-gradient(center center, rgb(255, 255, 255), rgb(0, 0, 0)); + -webkit-mask-image: -webkit-radial-gradient(center, rgb(255, 255, 255), rgb(0, 0, 0)); } #post > div.relatedPosts > div.relatedPosts-list > div { @@ -10083,16 +11643,18 @@ blockquote p { } .relatedPosts > .headline { - font-size: 1.2em; margin-bottom: 0.8rem !important; + font-size: 1.2em; } + +/* 文章标签 */ #post .tag_share .post-meta__tags { background: var(--heo-card-bg); border: var(--style-border-always); color: var(--heo-fontcolor); border-radius: 8px; - margin: 0px; + margin: 0; display: flex; align-items: center; white-space: nowrap; @@ -10100,7 +11662,7 @@ blockquote p { } #post .tag_share .post-meta__tags:not(:last-child) { - margin: 0px 0.5rem 0px 0px; + margin: 0 0.5rem 0 0; } #post .tag_share .post-meta__tags:hover { @@ -10120,22 +11682,24 @@ blockquote p { } } +/* 版权信息 */ +/* 背景 */ #post .post-copyright { background: var(--heo-card-bg); padding: 1rem 1.3rem; overflow: hidden; - border-width: 1px; border: var(--style-border); - transition: all 0.3s ease 0s; + border-width: 1px; + transition: 0.3s; } -#post .post-copyright::after { +#post .post-copyright:after { position: absolute; right: 22px; top: -77px; - content: ""; + content: '\f25e'; font-size: 180px; - font-family: "Font Awesome 5 Brands"; + font-family: 'Font Awesome 5 Brands'; color: var(--heo-fontcolor); opacity: 0.4; filter: blur(7px); @@ -10159,7 +11723,7 @@ blockquote p { font-size: 0.7rem; border-radius: 8px; margin-right: 0.5rem; - font-weight: 700; + font-weight: bold; line-height: 1.5; white-space: nowrap; } @@ -10182,31 +11746,33 @@ blockquote p { display: none; } - #post .post-copyright::after { + #post .post-copyright:after { display: none; } } +/* 复制按钮 */ .post-copyright-copybtn { margin-left: 0.5rem; color: var(--heo-fontcolor); opacity: 0.4; - transition: all 0.3s ease 0s; + transition: 0.3s; } .post-copyright-copybtn:hover { opacity: 1; - transition: all 0.3s ease 0s; + transition: 0.3s; } +/* 作者名 */ #post .post-copyright .post-copyright-info a { - padding: 0px; + padding: 0; color: var(--heo-fontcolor); - font-weight: 700; + font-weight: bold; } #post .post-copyright .post-copyright__notice .post-copyright-info a { - padding: 0px 4px; + padding: 0 4px; } #post .post-copyright .post-copyright-info a:hover { @@ -10214,7 +11780,7 @@ blockquote p { } #post .post-copyright .post-copyright-info { - padding-left: 0px; + padding-left: 0; color: var(--heo-fontcolor); overflow: hidden; display: -webkit-box; @@ -10223,14 +11789,14 @@ blockquote p { } #post .post-copyright .post-copyright-title { - padding-left: 0px; + padding-left: 0; color: var(--heo-fontcolor); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 1rem; - font-weight: 700; + font-weight: bold; } #post .post-copyright .post-copyright-title:hover { @@ -10238,9 +11804,9 @@ blockquote p { } #post > div.post-copyright > div.post-copyright__author > span > span { - padding: 0px; + padding: 0; color: var(--heo-fontcolor); - font-weight: 700; + font-weight: bold; font-size: 1rem; line-height: 1.38; overflow: hidden; @@ -10264,6 +11830,7 @@ blockquote p { } } +/* 链接 */ #post > div.post-copyright > div.post-copyright__type { line-height: 16px; display: flex; @@ -10278,7 +11845,7 @@ blockquote p { #post > div.post-copyright > div.post-copyright__type > span > a:hover { opacity: 1; - background: 0px 0px; + background: none; } #post-copyright-url a { @@ -10288,20 +11855,23 @@ blockquote p { -webkit-box-orient: vertical; } +/* 提示 */ #post > div.post-copyright > div.post-copyright__notice { font-size: 0.7rem; line-height: 1rem; - margin: 0.5rem 0px; + margin: 0.5rem 0; } -#post .post-copyright::before { +/* 装饰圈 */ +#post .post-copyright:before { display: none; } +/* 赞赏作者按钮 */ .post-reward .reward-button { background: var(--heo-red); color: var(--heo-white); - padding: 0px; + padding: 0; width: 133px; height: 40px; line-height: 39px; @@ -10314,7 +11884,7 @@ blockquote p { box-shadow: none; } -.share-button .fa-qrcode::before { +.share-button .fa-qrcode:before { font-size: 1rem; } @@ -10325,7 +11895,7 @@ blockquote p { } .post-reward .reward-main .reward-all .reward-item .post-qr-code-desc { - padding-top: 0px; + padding-top: 0rem; margin-top: -8px; margin-bottom: 8px; } @@ -10341,22 +11911,26 @@ blockquote p { align-items: center; } +/* 赞赏描述 */ .reward-dec { font-size: 0.6rem; } +/* 赞赏名单 */ + .reward-text { - margin-bottom: 0px; - font-weight: 700; + margin-bottom: 0rem; + font-weight: bold; } +/* 赞赏名单按钮 */ a.reward-main-btn { background: var(--heo-secondbg); color: var(--heo-fontcolor); display: flex; flex-direction: column; border-radius: 12px; - padding: 4px 0px; + padding: 4px 0; border: var(--style-border-always); margin: 8px; width: 100%; @@ -10364,19 +11938,20 @@ a.reward-main-btn { a.reward-main-btn:hover { color: var(--heo-white); - background-image: url(../images/404.gif); + background: var(--heo-red); + background-image: url(https://p.zhheo.com/JgNrST23690481619450556342.gif!cover); box-shadow: var(--heo-shadow-red); } .reward-title { - font-weight: 700; + font-weight: bold; color: var(--heo-red); } .reward-link.mode { background: var(--heo-green); color: var(--heo-white); - padding: 0px; + padding: 0; width: 173px; height: 40px; line-height: 39px; @@ -10384,7 +11959,7 @@ a.reward-main-btn:hover { border-radius: 8px; margin-left: 0.5rem; text-align: center; - transition: all 0.3s ease 0s; + transition: 0.3s; } @media screen and (min-width: 1300px) { @@ -10397,6 +11972,7 @@ a.reward-main-btn:hover { } } + .reward-link.mode a { color: var(--heo-white); } @@ -10410,31 +11986,36 @@ a.reward-main-btn:hover { box-shadow: none; } +/* 赞赏背景 */ + #quit-box { position: fixed; width: 100vw; height: 100vh; - background: rgba(0, 0, 0, 0.4); - top: 0px; - left: 0px; + background: rgba(0, 0, 0, .4); + top: 0; + left: 0; display: none; z-index: 101; - margin: 0px !important; + margin: 0 !important; } .post-tools-left #quit-box { display: none; } -#pagination .next-post, -#pagination .prev-post, + +/* 接下来下一篇 */ .next-post.pull-right, -.prev-post.pull-left { +.prev-post.pull-left, +#pagination .prev-post, +#pagination .next-post { background: var(--heo-secondbg); } @media screen and (min-width: 768px) { #pagination .next-post a { + border-left: var(--heo-card-bg); border-left-width: 3px; border-left-style: solid; display: flex; @@ -10447,15 +12028,16 @@ a.reward-main-btn:hover { } #pagination .prev-post a { + border-right: var(--heo-card-bg); border-right-width: 3px; border-right-style: solid; } #pagination .pagination-info { - padding: 1rem 1.5rem; + padding: 1rem 1.5rem 1rem 1.5rem; position: relative; display: flex; - top: 0px; + top: 0; transform: none; flex-direction: column; justify-content: center; @@ -10463,53 +12045,55 @@ a.reward-main-btn:hover { height: 100%; } - #pagination .next-post a:hover, - #pagination .prev-post a:hover { + #pagination .prev-post a:hover, + #pagination .next-post a:hover { background: var(--heo-main); } - #pagination .next-post a:hover div, - #pagination .prev-post a:hover div { + #pagination .prev-post a:hover div, + #pagination .next-post a:hover div { color: var(--heo-white) !important; } } @media screen and (max-width: 768px) { - #pagination .next-post a:hover, - #pagination .prev-post a:hover { + #pagination .prev-post a:hover, + #pagination .next-post a:hover { background: var(--heo-none); } + } -#pagination img.next-cover, -#pagination img.prev-cover { + +#pagination img.prev-cover, +#pagination img.next-cover { opacity: 0.15; transform: scale(1.03); - transition: all 0.3s ease 0s; + transition: 0.3s; filter: blur(0px); - backface-visibility: hidden; - transform-style: preserve-3d; + -webkit-backface-visibility: hidden; + -webkit-transform-style: preserve-3d; } -#pagination .next-post:hover img.next-cover, +#pagination .prev-post:hover img.prev-cover, #pagination .next-post:hover img.prev-cover, #pagination .prev-post:hover img.next-cover, -#pagination .prev-post:hover img.prev-cover { +#pagination .next-post:hover img.next-cover { opacity: 0.25; transform: scale(1.03); filter: blur(5px); } -#pagination .next-post .label, -#post #pagination .prev-post .label { +#post #pagination .prev-post .label, +#pagination .next-post .label { color: var(--heo-fontcolor); } -#pagination .next_info, -#post #pagination .prev_info { +#post #pagination .prev_info, +#pagination .next_info { color: var(--heo-fontcolor); - font-weight: 700; + font-weight: bold; -webkit-line-clamp: 2; white-space: normal; line-height: 1.3; @@ -10533,8 +12117,9 @@ a.reward-main-btn:hover { width: 300px; bottom: -100px; right: 20px; + z-index: 1000; height: fit-content; - transition: all 0.3s cubic-bezier(0.42, 0, 0.3, 1.11) 0s; + transition: cubic-bezier(0.42, 0, 0.3, 1.11) 0.3s; border: var(--style-border); border-radius: 12px; overflow: hidden; @@ -10555,17 +12140,17 @@ a.reward-main-btn:hover { #pagination .next-post a { border: none; height: fit-content; - padding: 0.5rem 0px; + padding: 0.5rem 0; } #pagination.pagination-post { - border-radius: 0px; + border-radius: 0; } - #pagination .next_info, - #post #pagination .prev_info { + #post #pagination .prev_info, + #pagination .next_info { font-size: 14px; - font-weight: 400; + font-weight: normal; } #pagination .pagination-info { @@ -10574,14 +12159,15 @@ a.reward-main-btn:hover { } #post #pagination { - background: 0px 0px; + background: none; } - #pagination .next-post, - #pagination .prev-post, .next-post.pull-right, - .prev-post.pull-left { + .prev-post.pull-left, + #pagination .prev-post, + #pagination .next-post { background: var(--heo-maskbgdeep); + -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } @@ -10598,10 +12184,10 @@ a.reward-main-btn:hover { position: relative; } - #pagination .next-post .label, - #post #pagination .prev-post .label { + #post #pagination .prev-post .label, + #pagination .next-post .label { color: var(--heo-fontcolor); - font-weight: 700; + font-weight: bold; font-size: 12px; margin-bottom: 0.5rem; border-bottom: var(--style-border); @@ -10621,24 +12207,25 @@ a.reward-main-btn:hover { box-shadow: var(--heo-shadow-border); } - #pagination .next-post .label, - #post #pagination .prev-post .label { + #post #pagination .prev-post .label, + #pagination .next-post .label { text-align: left; } - #pagination .next_info, - #post #pagination .prev_info { + #post #pagination .prev_info, + #pagination .next_info { text-align: left; } - #pagination .next-post, - #pagination .prev-post, .next-post.pull-right, - .prev-post.pull-left { + .prev-post.pull-left, + #pagination .prev-post, + #pagination .next-post { background: var(--heo-card-bg); } } +/* 翻页 */ @media screen and (max-width: 768px) { #pagination .page-number { display: none; @@ -10651,7 +12238,7 @@ a.reward-main-btn:hover { #pagination .pagination .extend { width: 100%; height: 2.5rem; - margin: 0.2rem 1rem 1rem; + margin: 0.2rem 1rem 1rem 1rem; border-radius: 12px; line-height: 2.5rem; background: var(--heo-card-bg); @@ -10670,7 +12257,7 @@ a.reward-main-btn:hover { #pagination .pagination { background: var(--heo-background); - transition: all 0.3s ease 0s; + transition: 0.3s; display: flex; } } @@ -10681,11 +12268,11 @@ a.reward-main-btn:hover { background: var(--heo-card-bg); height: 2rem; line-height: calc(2rem - 2px); - margin: 0px 0.3rem; + border-radius: 8px !important; + margin: 0 0.3rem; box-shadow: var(--heo-shadow-border); border: var(--style-border); - transition: all 0.3s ease 0s; - border-radius: 8px !important; + transition: 0.3s; } #pagination .page-number.current { @@ -10707,6 +12294,7 @@ a.reward-main-btn:hover { transform: scale(1.03); } + #pagination a.extend.next:hover, #pagination a.extend.prev:hover { color: var(--heo-theme); @@ -10715,11 +12303,13 @@ a.reward-main-btn:hover { transform: scale(1.03); } + @media screen and (min-width: 1300px) { #pagination .page-number:hover { transform: scale(1.03); } + #pagination a.extend.next:hover, #pagination a.extend.prev:hover { transform: scale(1.03); @@ -10733,10 +12323,11 @@ a.reward-main-btn:hover { #pagination a.extend.prev:active { transform: scale(0.97); } + } #pagination span.space { - margin: 0px 0.3rem; + margin: 0 0.3rem; } #pagination a.extend.next, @@ -10744,6 +12335,7 @@ a.reward-main-btn:hover { width: 4rem; height: 2rem; line-height: 1.9rem; + border-radius: 8px !important; background: var(--heo-card-bg); box-shadow: var(--heo-shadow-border); position: absolute; @@ -10752,13 +12344,12 @@ a.reward-main-btn:hover { align-items: center; justify-content: center; overflow: hidden; - transition: all 0.3s ease 0s; - border-radius: 8px !important; + transition: 0.3s; } #pagination a.extend.next i, #pagination a.extend.prev i { - transition: all 0.3s ease 0s; + transition: 0.3s; } #pagination a.extend.next { @@ -10767,7 +12358,7 @@ a.reward-main-btn:hover { #pagination a.extend.next .pagination_tips_next { margin-left: -32px; - transition: all 0.3s ease 0s; + transition: 0.3s; opacity: 0; } @@ -10779,7 +12370,7 @@ a.reward-main-btn:hover { #pagination a.extend.prev .pagination_tips_prev { margin-right: -32px; - transition: all 0.3s ease 0s; + transition: 0.3s; opacity: 0; } @@ -10800,6 +12391,7 @@ a.reward-main-btn:hover { } } +/* 相关推荐 */ .relatedPosts-list { display: flex; flex-wrap: wrap; @@ -10808,7 +12400,7 @@ a.reward-main-btn:hover { .relatedPosts > .relatedPosts-list > div { background: var(--heo-background); - transition: all 0.3s ease 0s; + transition: 0.3s; cursor: pointer; overflow: hidden; } @@ -10839,7 +12431,7 @@ a.reward-main-btn:hover { .relatedPosts > .relatedPosts-list .content .title { color: var(--heo-fontcolor); - font-weight: 700; + font-weight: bold; line-height: 1.5; -webkit-line-clamp: 4; font-size: 0.9rem; @@ -10851,10 +12443,12 @@ a.reward-main-btn:hover { display: none; } +/* 分割线 */ #post > hr { display: none; } +/* 文章tips */ .post-tips { color: var(--heo-gray); font-size: 14px; @@ -10878,6 +12472,12 @@ a.reward-main-btn:hover { } } +/* 评论 */ +/* ---------------------------------------------------------------- */ +/* ---------------------------------------------------------------- */ +/* ---------------------------------------------------------------- */ +/* ---------------------------------------------------------------- */ +/* ---------------------------------------------------------------- */ div#post-comment { margin-top: 2rem; } @@ -10891,6 +12491,7 @@ div#post-comment { #post-comment .comment-tips { background-color: rgba(103, 194, 58, 0.13); + border: var(--style-border-always); border-color: var(--heo-green); color: var(--heo-green); border-radius: 8px; @@ -10899,14 +12500,16 @@ div#post-comment { display: none; } + #post-comment .comment-tips.show { display: flex; } +/* 头像 */ .tk-avatar { - box-shadow: var(--heo-shadow-border); width: 32px !important; height: 32px !important; + box-shadow: var(--heo-shadow-border); } .tk-avatar.tk-has-avatar { @@ -10935,26 +12538,29 @@ img.tk-avatar-img { margin-right: 0.5rem !important; } -.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1)::before { - content: "输入QQ号会自动获取昵称和头像"; +/* 评论输入框提示 */ +/* 设置文字内容 :nth-child(1)的作用是选择第几个 */ +.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before { + content: '输入QQ号会自动获取昵称和头像'; } -.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2)::before { - content: "收到回复将会发送到你的邮箱"; +.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before { + content: '收到回复将会发送到你的邮箱'; } -.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3)::before { - content: "可以通过昵称访问你的网站"; +.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before { + content: '可以通过昵称访问你的网站'; } +/* 当用户点击输入框时显示 */ .el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before { display: block; - animation: 0.3s ease 0s 1 normal none running commonTipsIn; + animation: commonTipsIn 0.3s; } .el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after { display: block; - animation: 0.3s ease 0s 1 normal none running commonTriangleIn; + animation: commonTriangleIn 0.3s; } @keyframes commonTipsIn { @@ -10981,37 +12587,49 @@ img.tk-avatar-img { } } +/* 主内容区 */ .el-input.el-input--small.el-input-group.el-input-group--prepend::before { + /* 先隐藏起来 */ display: none; + /* 绝对定位 */ position: absolute; + /* 向上移动60像素 */ top: -60px; + /* 文字强制不换行，防止left:50%导致的文字换行 */ white-space: nowrap; + /* 圆角 */ border-radius: 10px; + /* 距离左边50% */ left: 50%; + /* 然后再向左边挪动自身的一半，即可实现居中 */ transform: translate(-50%); + /* 填充 */ padding: 14px 18px; - background: rgb(68, 68, 68); - color: rgb(255, 255, 255); + background: #444; + color: #fff; z-index: 100; } +/* 小角标 */ .el-input.el-input--small.el-input-group.el-input-group--prepend::after { display: none; - content: ""; + content: ''; position: absolute; - border-width: 12px; - border-style: solid; - border-color: rgb(68, 68, 68) transparent transparent; - border-image: initial; + /* 内容大小（宽高）为0且边框大小不为0的情况下，每一条边（4个边）都是一个三角形，组成一个正方形。 + 我们先将所有边框透明，再给其中的一条边添加颜色就可以实现小三角图标 */ + border: 12px solid transparent; + border-top-color: #444; left: 50%; transform: translate(-50%, -46px); } +/* 昵称 */ .tk-nick { - line-height: 32px; font-size: 1rem !important; + line-height: 32px; } +/* 填写项标题 */ .el-input-group__append, .el-input-group__prepend { background-color: var(--heo-card-bg) !important; @@ -11019,6 +12637,7 @@ img.tk-avatar-img { border-color: var(--heo-card-border) !important; } +/* 输入框 */ .el-input__inner { background: var(--heo-background) !important; border: 1px solid var(--heo-card-border) !important; @@ -11033,12 +12652,13 @@ img.tk-avatar-img { border: 1px solid var(--heo-main) !important; } +/* 评论输入框 */ .el-textarea__inner { background: var(--heo-background) !important; color: var(--heo-fontcolor) !important; border-radius: 12px !important; min-height: 100px !important; - padding: 16px 16px 40px !important; + padding: 16px 16px 40px 16px !important; border: var(--style-border-always) !important; } @@ -11050,13 +12670,13 @@ img.tk-avatar-img { } #page .el-textarea__inner { - box-shadow: var(--heo-shadow-border); background: var(--heo-card-bg) !important; + box-shadow: var(--heo-shadow-border); } .el-textarea__inner:focus { - box-shadow: var(--heo-shadow-main); border: var(--style-border-hover-always) !important; + box-shadow: var(--heo-shadow-main); } #page .tk-meta-input .el-input { @@ -11067,50 +12687,58 @@ img.tk-avatar-img { flex-direction: column-reverse !important; } +/* 评论数量字号 */ #twikoo > div.tk-comments > div.tk-comments-container > div.tk-comments-title > span:nth-child(1) { display: none !important; } +/* 加载时背景颜色 */ .el-loading-mask { + background-color: none !important; } +/* 所有标签 */ .tk-tag { transform: translateY(-2px); } +/* 评论博主标签圆角 */ .tk-tag-green { border-radius: 4px !important; - border: 0px solid rgb(225, 243, 216) !important; + border: 0px solid #e1f3d8 !important; font-size: 0.5rem !important; } -[data-theme="dark"] .tk-tag-green { - background-color: rgba(103, 194, 58, 0.13) !important; +[data-theme=dark] .tk-tag-green { + background-color: #67c23a21 !important; } +/* 审核中的评论 */ .tk-tag-yellow { border-radius: 4px !important; - border: 0px solid rgb(225, 243, 216) !important; + border: 0px solid #e1f3d8 !important; font-size: 0.5rem !important; } -[data-theme="dark"] .tk-tag-green { - background-color: rgba(192, 194, 58, 0.13) !important; +[data-theme=dark] .tk-tag-green { + background-color: #c0c23a21 !important; } +/* 评论置顶 */ .tk-tag-red { border-radius: 4px !important; - border: 0px solid rgb(243, 216, 216) !important; + border: 0px solid #f3d8d8 !important; font-size: 0.5rem !important; } -[data-theme="dark"] .tk-tag-red { - background-color: rgba(194, 58, 58, 0.13) !important; +[data-theme=dark] .tk-tag-red { + background-color: #c23a3a21 !important; } +/* 预览按钮 */ .el-button { background-color: var(--heo-fontcolor) !important; - border: 0 solid var(--heo-main) !important; + border: 0px solid var(--heo-main) !important; color: var(--heo-background) !important; border-radius: 8px !important; } @@ -11132,10 +12760,12 @@ img.tk-avatar-img { z-index: 102; } +/* 魔改教程入口 */ .twikoo-info { color: var(--heo-secondtext); } +/* 点赞和评论 */ .tk-action-link { color: var(--heo-lighttext) !important; } @@ -11144,6 +12774,7 @@ img.tk-avatar-img { fill: var(--heo-lighttext) !important; } +/* 取消按钮 */ button.el-button.tk-cancel.el-button--default.el-button--small { background: var(--heo-secondbg) !important; border-radius: 8px !important; @@ -11154,20 +12785,22 @@ button.el-button.tk-cancel.el-button--default.el-button--small { display: none; } +/* 发送按钮正常状态 */ .tk-comments .el-button--primary { + border-color: var(--heo-fontcolor) !important; + color: var(--heo-card-bg) !important; + border-radius: 4px !important; box-shadow: var(--heo-shadow-black); - transition: all 0.3s ease 0s; + transition: 0.3s; width: 5rem; position: absolute; top: -53px; right: 0px; - height: 32px; - border-color: var(--heo-fontcolor) !important; - color: var(--heo-card-bg) !important; - border-radius: 4px !important; margin-left: 0.5rem !important; + height: 32px; } +/* 发送按钮禁用状态 */ .tk-comments .el-button--primary.is-disabled, .tk-comments .el-button--primary.is-disabled:active, .tk-comments .el-button--primary.is-disabled:focus, @@ -11195,8 +12828,8 @@ button.el-button.tk-cancel.el-button--default.el-button--small { .tk-comments-title { position: absolute; - bottom: 0px; - left: 0px; + bottom: 0; + left: 0; } .tk-extras { @@ -11209,7 +12842,7 @@ button.el-button.tk-cancel.el-button--default.el-button--small { } .tk-icon.__comments { - margin-left: 0px !important; + margin-left: 0 !important; } .tk-row.actions { @@ -11220,24 +12853,27 @@ button.el-button.tk-cancel.el-button--default.el-button--small { } .tk-meta-input { + position: relative !important; margin-top: 0.8rem; width: calc(100% - 5.5rem); - position: relative !important; } +/* 内容 */ #post-comment blockquote { background: var(--heo-secondbg); border: var(--style-border); box-shadow: none; - margin: 0px 0px 0.5rem; + margin: 0; + margin-bottom: 0.5rem; font-size: 0.6rem; color: var(--heo-secondtext); border-radius: 8px; } +/* 表情 */ .tk-content .tk-owo-emotion { width: 3em; - margin: 0px 2px; + margin: 0px 2px 0px 2px; } .OwO .OwO-body .OwO-bar .OwO-packages li { @@ -11258,9 +12894,9 @@ button.el-button.tk-cancel.el-button--default.el-button--small { border-radius: 10px; z-index: 9999; display: none; - transform: translate(0px, -105%); + transform: translate(0, -105%); overflow: hidden; - animation: 0.3s cubic-bezier(0.42, 0, 0.3, 1.11) 0s 1 normal none running owoIn; + animation: owoIn 0.3s cubic-bezier(0.42, 0, 0.3, 1.11); padding: 1rem; } @@ -11275,12 +12911,12 @@ button.el-button.tk-cancel.el-button--default.el-button--small { @keyframes owoIn { 0% { - transform: translate(0px, -95%); + transform: translate(0, -95%); opacity: 0; } 100% { - transform: translate(0px, -105%); + transform: translate(0, -105%); opacity: 1; } } @@ -11296,23 +12932,29 @@ button.el-button.tk-cancel.el-button--default.el-button--small { border: var(--style-border-always); padding: 1px 5px 1px 2px; border-radius: 8px; - font-size: 0.5rem; margin-right: 4px !important; color: var(--heo-secondtext) !important; display: inline !important; margin-top: 6px !important; + font-size: 0.5rem; } .tk-extra .tk-icon { display: none; } +/* 更多评论 */ +/* [data-theme=dark] .tk-expand{ + background: linear-gradient(rgba(29, 31, 32,0), rgba(29, 31, 32,1))!important; + color: var(--heo-fontcolor); +} */ + .tk-expand { + background: var(--heo-card-bg) !important; + color: var(--heo-fontcolor) !important; border: var(--style-border-always); box-shadow: var(--heo-shadow-border); border-radius: 12px; - background: var(--heo-card-bg) !important; - color: var(--heo-fontcolor) !important; } .tk-expand:hover { @@ -11320,28 +12962,30 @@ button.el-button.tk-cancel.el-button--default.el-button--small { color: var(--heo-white) !important; } +/* 评论时间 */ .tk-time { + color: var(--heo-secondtext) !important; font-size: 0.8rem; margin-left: 0.5rem; - color: var(--heo-secondtext) !important; } +/* 评论之间的间距 */ .tk-comments-container > .tk-comment { - background: var(--heo-card-bg); - transition: all 0.3s ease 0s; - border-radius: 12px; - padding: 0.5rem 0px 0px; - border-right: none; - border-bottom: none; - border-left: none; - border-image: initial; - border-top: var(--style-border-dashed); - margin-top: 0px !important; + margin-top: 0rem !important; margin-bottom: 0.5rem !important; + background: var(--heo-card-bg); + transition: 0.3s; + border-radius: 12px; + padding: 0rem; + padding-top: 0.5rem; + border: none; + border-top: var(--style-border-dashed); } #page .tk-comments-container > .tk-comment { - padding: 1rem 1rem 1.5rem; + padding: 1rem; + padding-bottom: 1.5rem; + border: var(--style-border); border-top: var(--style-border); box-shadow: var(--heo-shadow-border); } @@ -11362,27 +13006,31 @@ button.el-button.tk-cancel.el-button--default.el-button--small { position: absolute; } +/* 评论功能模块标题字号 */ #post-comment .comment-head { - margin-bottom: 0.5rem; font-size: 0.8em !important; + margin-bottom: 0.5rem; } +/* 隐藏没有评论 */ .tk-comments-no { display: none !important; } .tk-comments-container { + min-height: 0rem !important; margin-top: 0.5rem; - min-height: 0px !important; } + .tk-replies > .tk-comment { background: var(--heo-card-bg); border-top: var(--style-border-dashed); border-radius: 12px; - padding: 1rem 0px 0px; - transition: all 0.3s ease 0s; - margin-top: 0px; + padding: 0; + transition: 0.3s; + padding-top: 1rem; + margin-top: 0; } .tk-content p { @@ -11394,21 +13042,24 @@ button.el-button.tk-cancel.el-button--default.el-button--small { color: var(--heo-secondtext); } +/* 图片描述 */ .img-alt { font-size: 12px; - margin: 0px; + margin: 0; color: var(--heo-secondtext); } +/* 文章长图 */ .long-img .img-alt { display: none; } .long-img img { - border-radius: 0px !important; - margin: 0px !important; + border-radius: 0 !important; + margin: 0 !important; } +/* 文章底部推荐 */ .relatedPosts > .relatedPosts-list > div:hover .cover { transform: scale(1); opacity: 0; @@ -11427,8 +13078,8 @@ button.el-button.tk-cancel.el-button--default.el-button--small { @media screen and (min-width: 1300px) { #pagination.pagination-post { - border-radius: 0px; - margin-top: 0px; + border-radius: 0; + margin-top: 0; } } @@ -11441,7 +13092,7 @@ button.el-button.tk-cancel.el-button--default.el-button--small { } .post-reward { - margin-top: 0px; + margin-top: 0rem; display: flex; justify-content: center; } @@ -11456,22 +13107,22 @@ button.el-button.tk-cancel.el-button--default.el-button--small { @media screen and (min-width: 768px) { .post-reward:hover > .reward-main { - justify-content: left; display: flex !important; + justify-content: left; } } @media screen and (max-width: 768px) { .post-reward .reward-main { + justify-content: center !important; position: fixed; - bottom: 0px; - left: 0px; - right: 0px; + bottom: 0; + left: 0; + right: 0; z-index: 102; width: 100%; margin: auto; - padding: 0px; - justify-content: center !important; + padding: 0; } .post-reward .reward-main .reward-all { @@ -11479,12 +13130,12 @@ button.el-button.tk-cancel.el-button--default.el-button--small { display: flex; flex-wrap: wrap; justify-content: space-around; - padding: 30px 0px 60px; - border-radius: 12px 12px 0px 0px; + padding: 30px 0 60px 0; + border-radius: 12px 12px 0 0; } #post .tag_share .post-meta__tags { - margin: 0px 0.5rem 0px 0px; + margin: 0 0.5rem 0 0; } a.reward-main-btn { @@ -11492,7 +13143,7 @@ button.el-button.tk-cancel.el-button--default.el-button--small { } .tk-meta-input .el-input .el-input-group__prepend { - padding: 0px 0.3rem !important; + padding: 0 0.3rem !important; } .tk-meta-input { @@ -11503,17 +13154,18 @@ button.el-button.tk-cancel.el-button--default.el-button--small { } .tk-meta-input .el-input { - margin-bottom: 8px; margin-left: 0px !important; width: 100% !important; + margin-bottom: 8px; } .tk-icon { position: absolute; - right: 0px; + right: 0; } } +/* 捐助工具栏 */ .post-tools-left { white-space: nowrap; display: flex; @@ -11523,7 +13175,8 @@ button.el-button.tk-cancel.el-button--default.el-button--small { } .post-tools-right { - overflow: overlay scroll; + overflow: scroll; + overflow-x: overlay; padding-right: 0px; display: flex; align-items: center; @@ -11531,6 +13184,7 @@ button.el-button.tk-cancel.el-button--default.el-button--small { } @media screen and (max-width: 768px) { + .post-tools-left > div { margin: 8px; } @@ -11551,7 +13205,7 @@ button.el-button.tk-cancel.el-button--default.el-button--small { } } -.post-reward .reward-main .reward-all::after { +.post-reward .reward-main .reward-all:after { display: none; } @@ -11581,7 +13235,7 @@ button.el-button.tk-cancel.el-button--default.el-button--small { color: var(--heo-fontcolor); border-radius: 8px; cursor: pointer; - transition: all 0.3s ease 0s; + transition: 0.3s; width: 56px; height: 40px; } @@ -11621,7 +13275,7 @@ button.el-button.tk-cancel.el-button--default.el-button--small { background: var(--heo-theme); border-color: var(--heo-theme); color: var(--heo-white); - transition: all 0.3s ease 0s; + transition: 0.3s; box-shadow: var(--heo-shadow-blue); } @@ -11650,7 +13304,7 @@ button.el-button.tk-cancel.el-button--default.el-button--small { padding: 12px; border-radius: 12px; background: var(--heo-background); - animation: 0.3s ease 0.1s 1 normal both running donate_effcet; + animation: donate_effcet 0.3s 0.1s ease both; flex-direction: column; border: var(--style-border-always); } @@ -11688,12 +13342,53 @@ button.el-button.tk-cancel.el-button--default.el-button--small { } } +/* 代码高亮 */ +/*#article-container figure.highlight {*/ +/* border-radius: 8px 8px 4px 4px;*/ +/*}*/ + +/*#article-container figure.highlight,*/ +/*#article-container pre {*/ +/* color: #f8f8f2;*/ +/* background: #696969*/ +/*}*/ + +/*#article-container figure.highlight .highlight-tools {*/ +/* background: #3f3f3f;*/ +/* color: var(--heo-fontcolor);*/ +/*}*/ + +/*#article-container figure.highlight .gutter pre {*/ +/* color: #d3d3d3 !important;*/ +/* background: grey;*/ +/* border-right: var(--style-border-always);*/ +/*}*/ + +/*#article-container figure.highlight figcaption a {*/ +/* color: #a9a9a9 !important*/ +/*}*/ + +/*#article-container pre,*/ +/*#article-container .highlight:not(.js-file-line-container) {*/ +/* background-color: var(--heo-card-bg) !important;*/ +/* color: var(--heo-fontcolor);*/ +/* box-shadow: var(--heo-shadow-border);*/ +/* border: var(--style-border-always);*/ +/*}*/ + +/*#article-container figure.highlight pre span::selection {*/ +/* background: var(--heo-main) !important;*/ +/* color: var(--heo-white) !important;*/ +/*}*/ + +/* 表情窗口owo */ .OwO .OwO-body { - overflow: hidden; - backdrop-filter: saturate(180%) blur(10px); border: var(--style-border-always) !important; border-radius: 8px !important; + overflow: hidden; background-color: var(--heo-maskbg) !important; + backdrop-filter: saturate(180%) blur(10px); + -webkit-backdrop-filter: blur(10px); } .OwO .OwO-body .OwO-bar { @@ -11701,8 +13396,8 @@ button.el-button.tk-cancel.el-button--default.el-button--small { } .OwO .OwO-body .OwO-items .OwO-item:hover { - border-radius: 8px; box-shadow: var(--heo-shadow-lightblack) !important; + border-radius: 8px; } #twikoo > div.tk-comments > div.tk-submit > div.tk-row.actions > div > div.tk-action-icon.OwO.OwO-open > div.OwO-body > div > ul > li > span { @@ -11711,14 +13406,14 @@ button.el-button.tk-cancel.el-button--default.el-button--small { } .OwO .OwO-body .OwO-bar .OwO-packages li { + margin-right: 0px !important; width: 50px; height: 48px; - transition: all 0.3s ease 0s; - margin-right: 0px !important; + transition: 0.3s; } .OwO .OwO-body .OwO-bar .OwO-packages li:hover { - transition: all 0.3s ease 0s; + transition: 0.3s; } .OwO-packages { @@ -11731,10 +13426,13 @@ button.el-button.tk-cancel.el-button--default.el-button--small { } .OwO .OwO-body .OwO-items-show { - min-height: 197px; margin: 12px 8px !important; + min-height: 197px; } +/* 文章列表页 */ +/* ---------------------------------------------------------------- */ +/* 标题 */ #page .category-lists .category-title { display: none; } @@ -11751,17 +13449,19 @@ button.el-button.tk-cancel.el-button--default.el-button--small { } #page { - background: 0px 0px; + background: none; border: none; - padding: 0px; + padding: 0; } +/* 图片 */ + .article-sort .article-sort-item .article-sort-item-img { border-radius: 12px; min-width: 151px; min-height: 80px; background: var(--heo-secondbg); - -webkit-mask-image: -webkit-radial-gradient(center center, rgb(255, 255, 255), rgb(0, 0, 0)); + -webkit-mask-image: -webkit-radial-gradient(center, rgb(255, 255, 255), rgb(0, 0, 0)); } @media screen and (max-width: 768px) { @@ -11770,6 +13470,8 @@ button.el-button.tk-cancel.el-button--default.el-button--small { } } +/* 标签列表页 */ + #post .tag_share .post-meta__tag-list { display: flex; } @@ -11779,35 +13481,35 @@ button.el-button.tk-cancel.el-button--default.el-button--small { display: flex; overflow: scroll; position: absolute; - left: 0px; - padding: 0px 20px; + left: 0; + padding: 0 20px 0 20px; width: 100%; } } #page .tag-cloud-list a { - padding: 0.2em 0.5em; - background: var(--heo-secondbg); - margin: 0.5em; - border-radius: 12px; - backface-visibility: hidden; - transform-style: preserve-3d; - border: var(--style-border-always); - box-shadow: var(--heo-shadow-border); color: var(--heo-fontcolor) !important; font-size: 1.4em !important; + padding: 0.2em .5em; + background: var(--heo-secondbg); + margin: .5em .5em; + border-radius: 12px; + -webkit-backface-visibility: hidden; + -webkit-transform-style: preserve-3d; + border: var(--style-border-always); + box-shadow: var(--heo-shadow-border); } #page .tag-cloud-list a:hover { - box-shadow: var(--heo-shadow-blue); - border: var(--style-border-hover); background: var(--heo-blue) !important; + box-shadow: var(--heo-shadow-blue); color: var(--heo-white) !important; + border: var(--style-border-hover); } span.tagsPageCount { background: var(--heo-card-bg); - padding: 4px; + padding: 4px 4px; border-radius: 8px; color: var(--heo-secondtext); line-height: 1; @@ -11821,8 +13523,8 @@ span.tagsPageCount { color: var(--heo-lighttext); } -#post .tag_share .post-meta__tags span.tagsPageCount, -#tag-page-tags .tagsPageCount { +#tag-page-tags .tagsPageCount, +#post .tag_share .post-meta__tags span.tagsPageCount { padding: 2px 4px; background: var(--heo-secondbg); border: var(--style-border-always); @@ -11835,8 +13537,8 @@ span.tagsPageCount { margin-left: 4px; } -#post .tag_share .post-meta__tags:hover span.tagsPageCount, -#tag #tag-page-tags a:hover .tagsPageCount { +#tag #tag-page-tags a:hover .tagsPageCount, +#post .tag_share .post-meta__tags:hover span.tagsPageCount { background: var(--heo-card-bg); color: var(--heo-lighttext); } @@ -11850,16 +13552,22 @@ span.tags-punctuation { opacity: 0.4; } +/* page标题 */ #article-container h1 { - padding-left: 0px; + padding-left: 0rem; } -#article-container h1::before { +#article-container h1:before { display: none; } #article-container h1:hover { - padding-left: 0px; + padding-left: 0rem; +} + +/* 分类页 */ +#article-container > div > figure > figcaption > p { + margin: 0; } #page .category-lists ul li::before { @@ -11867,13 +13575,16 @@ span.tags-punctuation { } #page .category-lists ul li { - margin: 0px 8px 8px 0px; + margin: 0; + margin-right: 8px; + margin-bottom: 8px; } #page .category-lists ul { display: flex; - padding: 0px; - flex-flow: row wrap; + padding: 0; + flex-wrap: wrap; + flex-direction: row; } #page .category-lists ul li { @@ -11884,52 +13595,66 @@ span.tags-punctuation { border: var(--style-border-always); } +/* 分类圆角 */ +figure.gallery-group { + border-radius: 12px; +} + +/* 分类分割线隐藏 */ +figure.gallery-group:hover .gallery-group-name::after { + display: none; +} + +/* 标签详情页标题 */ .tag-cloud-title { display: none; } .tk-replies .tk-content { - margin-top: 0px !important; + margin-top: 0rem !important; } #tag #tag-page-tags { display: flex; - flex-flow: row wrap; - margin: 0px -0.75rem 0.5rem; + flex-direction: row; + flex-wrap: wrap; + margin: 0 -0.75rem; + margin-bottom: 0.5rem; } #tag #tag-page-tags a { padding: 0.1rem 0.5rem; - margin: 0.25rem; + margin: 0.25rem 0.25rem; line-height: 1.6; border-radius: 8px; + color: var(--heo-fontcolor) !important; border: var(--style-border-always); display: flex; align-items: center; - color: var(--heo-fontcolor) !important; } #tag #tag-page-tags a.select { + color: var(--heo-white) !important; background: var(--heo-theme); box-shadow: var(--heo-shadow-theme); - color: var(--heo-white) !important; } #tag #tag-page-tags a:hover { + color: var(--heo-white) !important; background: var(--heo-theme); box-shadow: var(--heo-shadow-theme); - color: var(--heo-white) !important; } -.article-sort-item::before { +/* 时间线 */ +.article-sort-item:before { display: none; } -.article-sort-title::before { +.article-sort-title:before { display: none; } -.article-sort-title::after { +.article-sort-title:after { display: none; } @@ -11938,18 +13663,18 @@ span.tags-punctuation { } .article-sort { - margin-left: 0px; - padding-left: 0px; + margin-left: 0; + padding-left: 0; } .article-sort-title { - margin-left: 0px; - padding-bottom: 0px; - padding-left: 0px; + margin-left: 0; + padding-bottom: 0; + padding-left: 0; } .article-sort-item { - margin: 0px 0px 1rem; + margin: 0 0 1rem 0rem; overflow: hidden; border-radius: 12px; } @@ -11971,12 +13696,13 @@ span.tags-punctuation { } .article-sort-title { - font-weight: 700; + font-weight: bold; font-size: 2em; } +/* 文章列表 */ .article-sort-item-info { - padding: 0px 0.8rem; + padding: 0 0.8rem; display: flex; flex-direction: column; } @@ -11989,7 +13715,7 @@ span.tags-punctuation { .article-sort-item-title { order: 0; - font-weight: 700; + font-weight: bold; } .article-sort-item-title:hover { @@ -11997,6 +13723,9 @@ span.tags-punctuation { color: var(--heo-hovertext); } +/* 友情链接页面 */ +/* ---------------------------------------------------------------- */ +/* 随机文章 */ #random-post { min-height: 32px; background: var(--card-bg); @@ -12012,7 +13741,7 @@ span.tags-punctuation { border-bottom: 2px solid var(--heo-lighttext); color: var(--heo-fontcolor); font-weight: 700; - padding: 0px 4px; + padding: 0 4px; } .random-friends-post:hover { @@ -12032,19 +13761,21 @@ span.tags-punctuation { color: var(--heo-hovertext); } +/* 炙焰友链间距 */ .flink#article-container .flink-list { - padding: 0px; - margin: 1rem -6px 0px; + padding: 0; + margin: 1rem -6px 0 -6px; overflow-x: hidden; } .flink#article-container .flink-desc { - margin: 0px; + margin: 0; } +/* 友情描述 */ .flink#article-container .flink-list > .flink-list-item a .flink-item-desc { white-space: normal; - padding: 5px 10px 16px 0px; + padding: 5px 10px 16px 0; color: var(--heo-fontcolor); text-align: left; height: 40px; @@ -12060,6 +13791,7 @@ span.tags-punctuation { color: var(--heo-white); } +/* 友链标题 */ .flink-list-item .flink-item-info { max-width: 136px; overflow: hidden; @@ -12085,41 +13817,47 @@ span.tags-punctuation { } .flink#article-container .flink-list > .flink-list-item a:hover { - background: 0px 0px; + background: none; } +/* 友链头像 */ .flink#article-container .flink-list > .flink-list-item a img { border-radius: 32px; margin: 15px 20px 15px 15px; - transition: all 0.3s ease 0s; + transition: 0.3s; background: var(--heo-background); min-width: 60px; min-height: 60px; } +/* 悬浮状态头像 */ .flink#article-container .flink-list > .flink-list-item:hover a img { - transition: all 0.6s ease 0s; - width: 0px; - height: 0px; + transition: 0.6s; + width: 0; + height: 0; opacity: 0; margin: 0.5rem; min-width: 0px; min-height: 0px; } +/* 标题和描述 */ .flink#article-container .flink-list > .flink-list-item a span { - transition: all 0.3s ease 0s; + transition: 0.3s; } +/* 友链描述 */ .flink#article-container .flink-list > .flink-list-item:hover a .flink-item-desc { overflow: inherit; width: 100%; } +/* 修改初始动画 */ .flink#article-container .flink-list > .flink-list-item { - margin: 6px; - transition: all 0.3s ease-in-out 0s; + margin: 6px 6px; + transition: 0.3s; border-radius: 12px; + transition-timing-function: ease-in-out; position: relative; width: calc(20% - 12px); border: var(--style-border); @@ -12127,6 +13865,7 @@ span.tags-punctuation { background: var(--heo-card-bg); } + .flink#article-container .flink-list > .flink-list-item:hover { transform: scale(1); background: var(--heo-theme); @@ -12148,6 +13887,10 @@ span.tags-punctuation { line-height: 1.5 !important; } +/* 超级博主友链 */ + +/* 超级博主标题 */ + .flink#article-container .site-card .info .title { color: var(--heo-fontcolor); text-align: left; @@ -12168,11 +13911,13 @@ span.tags-punctuation { align-items: flex-start; } + +/* 超级博主描述 */ .flink#article-container .site-card .info .desc { font-size: 0.7rem; color: var(--heo-fontcolor); opacity: 0.7; - transition: all 0.3s ease 0s; + transition: 0.3s; text-align: left; } @@ -12181,23 +13926,25 @@ span.tags-punctuation { } .flink#article-container .site-card:hover .info .desc { - transition: all 0.3s ease 0s; + transition: 0.3s; color: var(--heo-white); - width: 100%; + width: 100% } .flink#article-container .site-card:hover .info { background: var(--heo-theme); } +/* 背景 */ .flink#article-container .site-card { border: var(--style-border); border-radius: 12px; - transition: all 0.3s ease-in-out 0s; + transition: 0.3s; + transition-timing-function: ease-in-out; overflow: hidden; height: 200px; position: relative; - width: calc(14.2857% - 16px); + width: calc(100% / 7 - 16px); background: var(--heo-card-bg); box-shadow: var(--heo-shadow-border); } @@ -12208,25 +13955,32 @@ span.tags-punctuation { } .flink#article-container .site-card:active { + transition: 0.95; } } .site-card-tag { position: absolute; - top: 0px; - left: 0px; + top: 0; + left: 0; padding: 4px 8px; background-color: var(--heo-main); box-shadow: var(--heo-shadow-main); color: var(--heo-white); z-index: 1; - border-radius: 12px 0px; - transition: all 0.3s ease 0s; + border-radius: 12px 0 12px 0; + transition: 0.3s; font-size: 0.6rem; } .site-card-tag.vip { - background: linear-gradient(38deg, rgb(229, 176, 133) 0px, rgb(212, 143, 22) 100%); + /*! Edit and share this gradient: https://html5kit.com/gradient-editor/?preset=d48f16,100;e5b085,0 */ + background: -moz-linear-gradient(38deg, rgba(229, 176, 133, 1) 0%, rgba(212, 143, 22, 1) 100%); + /* FF3.6+ */ + background: -webkit-linear-gradient(38deg, rgba(229, 176, 133, 1) 0%, rgba(212, 143, 22, 1) 100%); + /* Chrome10-25, Safari5.1-6 */ + background: linear-gradient(38deg, rgba(229, 176, 133, 1) 0%, rgba(212, 143, 22, 1) 100%); + /* W3C, IE10+, Firefox16+, Chrome26+, Opera12+, Safari7+ */ overflow: hidden; box-shadow: var(--heo-shadow-yellow); } @@ -12234,21 +13988,31 @@ span.tags-punctuation { .light { cursor: pointer; position: absolute; - top: 0px; + top: 0; width: 100px; height: 50px; + background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); - animation: 4s ease 0s infinite normal both running light_tag; + -webkit-animation: light_tag 4s both infinite; + -moz-animation: light_tag 4s both infinite; + -ms-animation: light_tag 4s both infinite; + animation: light_tag 4s both infinite; } @keyframes light_tag { 0% { - transform: skewX(0deg); + transform: skewx(0deg); + -o-transform: skewx(0deg); + -moz-transform: skewx(0deg); + -webkit-transform: skewx(0deg); left: -150px; } 99% { - transform: skewX(-25deg); + transform: skewx(-25deg); + -o-transform: skewx(-25deg); + -moz-transform: skewx(-25deg); + -webkit-transform: skewx(-25deg); left: 50px; } } @@ -12262,6 +14026,7 @@ span.tags-punctuation { left: -50px; } + .flink-list-item:hover .site-card-tag { left: -50px; } @@ -12272,14 +14037,15 @@ span.tags-punctuation { padding: 0.5rem; width: 100%; height: 90px; - margin: 0px; - border-radius: 0px 0px 12px 12px; + margin: 0; + border-radius: 0 0 12px 12px; } +/* 修复图片圆角 */ .flink#article-container .site-card .img img { - border-radius: 12px 12px 0px 0px; + border-radius: 12px 12px 0 0; transform: scale(1.03); - transition: all 0.3s ease 0s; + transition: 0.3s; } @media screen and (min-width: 769px) { @@ -12293,37 +14059,42 @@ span.tags-punctuation { } } + .flink#article-container .site-card .img { - -webkit-mask-image: -webkit-radial-gradient(center center, rgb(255, 255, 255), rgb(0, 0, 0)); - border-radius: 12px 12px 0px 0px; + -webkit-mask-image: -webkit-radial-gradient(center, rgb(255, 255, 255), rgb(0, 0, 0)); + border-radius: 12px 12px 0 0; height: 120px; width: 100%; display: flex; border: none; - padding: 0px !important; + padding: 0 !important; } + +/* 头像 */ .flink#article-container .site-card .info img { border-radius: 32px; - margin: 2px 8px 0px 0px; + transition: 0.3s !important; + margin: 2px 8px 0 0; width: 20px; height: 20px; min-width: 20px; min-height: 20px; background: var(--heo-secondbg); - transition: all 0.3s ease 0s !important; } + +/* 边距 */ .flink#article-container .site-card-group { - padding: 20px 0px; + padding: 20px 0; } .flink#article-container .site-card:hover .info img { - width: 0px; - height: 0px; + width: 0; + height: 0; opacity: 0; - min-width: 0px; - min-height: 0px; + min-width: 0; + min-height: 0; } .flink#article-container .site-card:hover { @@ -12331,12 +14102,15 @@ span.tags-punctuation { box-shadow: var(--heo-shadow-main); } +/* 友链文章 */ .article-sort-item-info a { margin-right: auto; overflow: hidden; text-overflow: ellipsis; } +/* 新页脚 */ + @media screen and (max-width: 768px) { #letlink { flex-direction: column !important; @@ -12354,30 +14128,31 @@ span.tags-punctuation { .footer-banner-right { display: flex; - flex-flow: row wrap; + flex-direction: row; + flex-wrap: wrap; } #footer-wrap { display: flex; flex-wrap: wrap; justify-content: space-around; - padding: 20px 50px 0px; + padding: 20px 50px 0px 50px; + text-align: left !important; max-width: 1200px; margin: 0px auto; - text-align: left !important; } #footer-wrap h1 { font-size: 1.5rem; - margin: 0px; + margin: 0; } #footer-wrap h3 { - padding: 0px 12px; + padding: 0 12px; } #footer-wrap p { - margin: 0px 0px 0px 0.2rem; + margin: 0 0 0 0.2rem; font-size: 0.8rem; opacity: 0.8; } @@ -12392,8 +14167,9 @@ span.tags-punctuation { #footer-wrap #letlogo { display: flex; flex-direction: column; + margin-right: 60px; align-self: center; - margin: auto 0px; + margin: auto 0; max-width: 200px; } @@ -12408,7 +14184,7 @@ span.tags-punctuation { display: flex; flex-direction: row; justify-content: space-around; - margin: 0px 0px 1rem; + margin: 0 0 1rem 0; } #weblogo i { @@ -12417,19 +14193,45 @@ span.tags-punctuation { letter-spacing: -10px; } -#footer::before { - z-index: -1; +/* 页脚底层背景 */ +#footer:before { position: absolute !important; width: 100% !important; height: 100% !important; - content: "" !important; + content: '' !important; + z-index: -1; } +/* 微信公众号 */ + +/*微信二维码*/ +/* a.weixin { + position: relative; +} + +.weixin::after { + content: url(https://p.zhheo.com/e9586c8eeb7c5cd4ff4cc21deedab43fc379cc07.png!cover); + position: absolute; + right: -40px; + top: -230px; + z-index: 99; + border: 0px solid #0095ba; + overflow: hidden; + -webkit-transform-origin: bottom; + transform-origin: bottom; + -webkit-transform: scale(0); + transform: scale(0); + opacity: 0; + -webkit-transition: all .3s ease-in-out; + transition: all .3s ease-in-out; +} */ + .weixin:hover::after { transform: scale(1); opacity: 1; } +/* 404页面 */ #error-wrap { top: 40%; } @@ -12439,14 +14241,15 @@ span.tags-punctuation { } #error-wrap .error-content { - border-radius: 12px; box-shadow: none !important; + border-radius: 12px; background: var(--heo-card-bg) !important; } #body-wrap.error .aside-list { display: flex; - flex-flow: row nowrap; + flex-direction: row; + flex-wrap: nowrap; bottom: 0px; position: absolute; padding: 1rem; @@ -12456,9 +14259,10 @@ span.tags-punctuation { #body-wrap.error .aside-list .aside-list-group { display: flex; - flex-flow: row nowrap; + flex-direction: row; + flex-wrap: nowrap; max-width: 1200px; - margin: 0px auto; + margin: 0 auto; } #body-wrap.error .aside-list .aside-list-item { @@ -12485,8 +14289,9 @@ span.tags-punctuation { display: -webkit-box; -webkit-box-orient: vertical; line-height: 1.5; - place-content: center; + justify-content: center; align-items: flex-end; + align-content: center; padding-top: 0.5rem; } @@ -12494,25 +14299,356 @@ span.tags-punctuation { display: none; } +/* bb哔哔 */ +/* bb样式 */ + +#bber .timeline #waterfall { + opacity: 0; + transition: 0.3s; +} + +#bber .timeline #waterfall.show { + opacity: 1; +} + +#bber .timeline ul li.item { + position: relative; + width: 32%; + border: var(--style-border-always); + border-radius: 12px; + padding: 1rem; + padding-bottom: 0.5rem; + transition: 0.3s; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: space-between; + align-items: flex-start; + background: var(--heo-card-bg); + box-shadow: var(--heo-shadow-border); + margin-right: 2%; +} + +#bber .timeline ul li.item hr { + display: flex; + position: relative; + margin: 8px 0; + border: 1px dashed var(--heo-theme-op); + width: 100%; +} + +@media screen and (max-width: 768px) { + #bber .timeline ul li.item { + padding: 0; + } +} + +#bber .timeline ul li.item:hover { + border: var(--style-border-hover); +} + +#bber ul.list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} + +#bber li.item { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-items: flex-start; +} + + +@media screen and (max-width: 1300px) { + #bber .timeline ul li.item { + width: 49%; + margin-right: 1%; + } +} + + +@media screen and (max-width: 768px) { + #bber .timeline ul li.item { + width: 100%; + margin-right: 0; + } + + #bber .timeline ul li.item { + padding: 16px 20px; + } +} + +.timeline ul .list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} + +/* 标题 */ +.bb-info { + display: inline; + float: right; + line-height: 1; + color: var(--heo-secondtext); + margin-left: auto; + margin-bottom: 1rem; + margin-right: 0.5rem; +} + +.bb-info:hover { + color: var(--heo-hovertext); +} + +#bber { + margin-top: 1rem; + width: 100%; +} + +/* 每条动态 */ +#bber div.bber-content { + display: flex; + flex-direction: initial; + flex-wrap: wrap; + border-radius: 12px; + width: 100%; + height: 100%; +} + +#bber > section > ul > li.item { + margin-bottom: 1rem; +} + +#bber .bber-info { + display: flex; + align-items: center; +} + +#bber .bber-info .fa-rectangles-mixed { + margin-right: 8px; +} + +#bber .bber-content-link { + display: flex; + margin-left: 0.5rem; + color: var(--heo-secondtext); + font-size: 0.7rem; + align-items: center; + background-color: rgba(245, 108, 108, 0.13); + color: #f56c6c; + padding: 0 8px; + border-radius: 20px; +} + +#bber .bber-content-link:hover { + background-color: var(--heo-main); + color: var(--heo-white); +} + +#bber .bber-content-link i { + margin-right: 3px; +} + +#bber .bber-reply { + cursor: pointer; + padding: 0 4px; +} + +#bber .bber-bottom { + display: flex; + justify-content: space-between; + width: 100%; +} + +#bber .count { + color: var(--heo-secondtext); + font-size: 0.8rem; +} + +#bber p { + margin: 0; +} + +#bber .datafrom i { + margin-right: 4px; +} + +/* 音乐 */ +#bber .bber-music { + width: 100%; + height: 90px; + margin: 0.5rem 0; + border-radius: 8px; + overflow: hidden; + border: var(--style-border-always); + background: var(--heo-secondbg); +} + +#bber .aplayer { + margin: 0; +} + +#bber .aplayer .aplayer-info .aplayer-music .aplayer-title { + font-size: 0.8rem; + font-weight: bold; + margin: 0; + color: var(--heo-black); +} + +#bber .aplayer.aplayer-withlrc .aplayer-pic { + height: 82px; + width: 82px; + margin: 4px; + border-radius: 4px; +} + +#bber .aplayer .aplayer-info .aplayer-music { + height: 23px; +} + +#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap { + padding: 0; +} + +#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar { + background: var(--heo-gray); + height: 8px; + border-radius: 12px; + transition: 0.3s; + overflow: hidden; +} + +#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap:hover .aplayer-bar { + height: 12px; +} + +#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played { + height: 100%; + border-radius: 12px; +} + +#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded { + height: 100%; + border-radius: 12px; +} + +#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb { + display: none; +} + +#bber .aplayer .aplayer-info .aplayer-controller { + align-items: center; +} + +#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time { + position: initial; +} + +#bber .bber-music .aplayer-lrc { + display: none; +} + +/* 只能展示30条的提示 */ +#bber-tips { + font-size: 14px; + display: flex; + justify-content: center; + margin-top: 1rem; +} + +/* 图片 */ + +#bber .bber-content-img img { + object-fit: cover; + max-height: 100%; + border-radius: 12px; +} + +#bber .bber-content-img { + height: 100px; + margin: auto; + margin-top: 0.2rem; + margin-bottom: 0.3rem; + margin-left: 0; + border-radius: 12px; + overflow: hidden; + display: flex; + position: relative; +} + +/* 时间 */ + +#bber > section > ul > li > div .bber-info-time { + color: var(--heo-fontcolor); + font-size: 0.7rem; + background-color: var(--heo-gray-op); + padding: 0 8px; + border-radius: 20px; + cursor: default; + display: flex; + align-items: center; +} + +#bber > section > ul > li > div .bber-info-time i { + margin-right: 8px; +} + +/* 内容 */ +#bber .bber-content .datacont { + order: 0; + font-size: 0.8rem; + font-weight: bold; + color: var(--heo-fontcolor); + width: 100%; + line-height: 1.38; + border-radius: 12px; + margin-bottom: 0.5rem; + display: flex; + flex-direction: column; + text-align: justify; +} + +/* 设备 */ +#bber > section > ul > li > div .datafrom { + order: 2; + color: var(--heo-secondtext); + font-size: 0.7rem; + margin-left: 8px; +} + +#bber > section > ul > li > div .datafrom small { + font-size: 0.7rem; +} + +/* 加载更多 */ .load-btn.button-load { background: var(--heo-card-btn-bg); color: var(--heo-fontcolor); - padding: 12px; - margin: 1.5rem 0px 0px; + padding: 12px 12px; + margin: 1.5rem 0 0 0; width: 100%; text-align: center; border-radius: 12px; - transition: all 0.3s ease 0s; - font-weight: 700; + transition: 0.3s; + font-weight: bold; } .load-btn.button-load:hover { background: var(--heo-blue); color: var(--heo-white); - transition: all 0.3s ease 0s; + transition: 0.3s; box-shadow: var(--heo-shadow-blue); } +/* 友链朋友圈 */ + +#hexo-circle-of-friends-root { + margin: 0 -8px; +} + .moments-list { display: flex; flex-direction: column; @@ -12542,12 +14678,12 @@ span.tags-punctuation { border-radius: 32px; overflow: hidden; background: var(--heo-secondbg); - padding: 0px !important; + padding: 0 !important; } .friendlink-avatar:hover { - background: var(--heo-secondbg); border-radius: 32px !important; + background: var(--heo-secondbg); } .moments-list .article-sort-item-info .article-sort-item-title { @@ -12558,24 +14694,44 @@ span.tags-punctuation { color: var(--heo-hovertext); } +a.bb-link { + margin-left: 8px; + color: var(--heo-secondtext) !important; + display: inline; + border: none !important; +} + +a.bb-link-info { + display: inline; + float: right; + border: none !important; + color: var(--heo-secondtext) !important; + line-height: 2.7rem; +} + +a.bb-link-info:hover { + color: var(--heo-fontcolor) !important; + background: none !important; +} + #friend_link_moments { border: none !important; } .moments-article-img { height: 100%; - margin: 0px !important; + margin: 0 !important; } .tab-item-content #moments_container .moments-item a { border-bottom: none; - padding: 0px; + padding: 0; margin-right: auto; width: auto; } .tab-item-content #moments_container .moments-item a:hover { - background: 0px 0px; + background: none; color: var(--heo-lighttext); box-shadow: none; } @@ -12584,8 +14740,10 @@ span.tags-punctuation { display: none; } +/* 朋友圈页面 */ + #friend_moments_list .moments-sort-item { - margin: 1rem 0px; + margin: 1rem 0; } .moments-sort-item-img { @@ -12599,12 +14757,12 @@ span.tags-punctuation { .moments-sort-item-title { color: var(--heo-lighttext); border-bottom: none !important; - padding: 0px !important; + padding: 0 !important; } .moments-sort-item-title:hover { color: var(--heo-hovertext) !important; - background: 0px 0px !important; + background: none !important; box-shadow: none !important; } @@ -12613,21 +14771,21 @@ span.tags-punctuation { } .moments_load_button { - transition: all 0.3s ease 0s; - width: 100%; - margin-top: 1rem; - margin-bottom: 1rem; color: var(--heo-fontcolor) !important; background: var(--heo-card-btn-bg) !important; padding: 12px 16px !important; border-radius: 12px !important; - border: 0px !important; + transition: 0.3s; + width: 100%; + margin-top: 1rem; + margin-bottom: 1rem; + border: 0 !important; } .moments_load_button:hover { - transition: all 0.3s ease 0s; color: var(--heo-white) !important; background: var(--heo-main) !important; + transition: 0.3s; } .moments-item-title { @@ -12635,10 +14793,10 @@ span.tags-punctuation { font-size: 1rem; order: 0; width: 100%; - font-weight: 700; + font-weight: bold; + -webkit-line-clamp: 1 !important; overflow: hidden; -webkit-box-orient: vertical; - -webkit-line-clamp: 1 !important; } .moments-item-info { @@ -12656,32 +14814,32 @@ span.tags-punctuation { .chart { align-items: flex-start; - flex: 1 1 0%; + flex: 1; width: 100px; height: 60px; margin: 20px; } .moments-item-title { - font-weight: 700; + font-weight: bold; } .moments_post_info_number { - float: right; + float: right } @media screen and (max-width: 500px) { #info_user_pool { padding: 10px; flex-direction: column; - max-height: 200px; + max-height: 200px } .chart { - flex: 0 1 0%; + flex: 0; width: 100%; height: 160px; - margin: 0px; + margin: 0; } } @@ -12699,26 +14857,28 @@ span.tags-punctuation { #info_user_pool { background: var(--heo-secondbg); - margin-top: 1rem; border-radius: 12px !important; + margin-top: 1rem; box-shadow: none !important; } .moments-item { - margin-left: 0px !important; + margin-left: 0 !important; box-shadow: none !important; } +/* 豆瓣 */ .hexo-douban-item { + border-bottom: none !important; background: var(--heo-card-bg); + border: var(--style-border); box-shadow: var(--heo-shadow-border); border-radius: 12px; - margin: 8px 0px; + margin: 8px 0; height: 160px; + min-height: 160px !important; width: 49%; overflow: hidden; - border-bottom: none !important; - min-height: 160px !important; } @media screen and (min-width: 1300px) { @@ -12729,12 +14889,13 @@ span.tags-punctuation { #hexo-douban-item3 { display: flex; - flex-flow: row wrap; + flex-direction: row; + flex-wrap: wrap; justify-content: space-between; } .hexo-douban-item .hexo-douban-picture a { - padding: 0px !important; + padding: 0 !important; } .hexo-douban-item .hexo-douban-picture img { @@ -12770,7 +14931,7 @@ span.tags-punctuation { } span.hexo-douban-pagenum { - margin: 0px 0.5rem; + margin: 0 0.5rem; } .hexo-douban-title { @@ -12779,36 +14940,36 @@ span.hexo-douban-pagenum { } .hexo-douban-title a { - padding: 0px !important; + padding: 0 !important; } .hexo-douban-info { - margin-right: 0.5rem; padding-left: 130px !important; + margin-right: 0.5rem; } .hexo-douban-meta { + font-size: 0.7rem !important; color: var(--heo-secondtext); margin-top: 0.3rem; line-height: 1.05; - font-size: 0.7rem !important; } .hexo-douban-comments { line-height: 1.2; margin-top: 0.5rem; + font-size: 0.8rem !important; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; - font-size: 0.8rem !important; } .hexo-douban-picture { height: 100%; - padding: 10px 0px 10px 10px; - top: 0px !important; + top: 0 !important; + padding: 10px 0 10px 10px; } .hexo-douban-picture a img { @@ -12819,17 +14980,21 @@ span.hexo-douban-pagenum { width: 4rem; height: 2rem; line-height: 1.9rem; + border-radius: 8px !important; background: var(--heo-card-bg); box-shadow: var(--heo-shadow-lightblack); - margin: 0px 0.2rem; - border-radius: 8px !important; + border: var(--style-border); + margin: 0 0.2rem; border-bottom: var(--style-border) !important; } +/* 标签页 */ +/* 隐藏时间 */ .article-sort-item-time { display: none; } +/* 标签 */ .article-sort-item-tags { margin-top: 8px; white-space: nowrap; @@ -12842,14 +15007,15 @@ span.hexo-douban-pagenum { .article-sort-item-tags a { color: var(--heo-fontcolor); - transition: all 0.3s ease 0s; + transition: 0.3s; } .article-sort-item-tags a:hover { color: var(--heo-theme); - transition: all 0.3s ease 0s; + transition: 0.3s; } +/* v3footer */ #heo-footer .footer-links { display: flex; flex-direction: column; @@ -12857,19 +15023,26 @@ span.hexo-douban-pagenum { #heo-footer { display: flex; - flex-flow: row wrap; + flex-direction: row; width: 100%; max-width: 1200px; - margin: 1rem auto 3rem; + margin: 1rem auto; justify-content: space-between; - padding: 0px 1rem; + flex-wrap: wrap; + margin-bottom: 3rem; + padding: 0 1rem; } #heo-footer .footer-item { font-size: 0.8rem; line-height: 0.8rem; - margin: 0.38rem auto 0.38rem 0px; + margin: 0.38rem 0; color: var(--heo-fontcolor); + margin-right: auto; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + max-width: 120px; } #heo-footer .footer-item:hover { @@ -12880,6 +15053,36 @@ span.hexo-douban-pagenum { min-width: 120px; } +#heo-footer .footer-title-group { + display: flex; + align-items: center; + margin: 1rem 0 0.7rem 0; +} + +#heo-footer .footer-title-group a { + margin-left: 8px; +} + +#heo-footer .footer-title-group i { + line-height: 1; + color: var(--heo-secondtext); + transition: 0.3s; + font-size: 12px; +} + + +#heo-footer .footer-title-group a:hover i { + color: var(--heo-main); +} + +#heo-footer .footer-title-group .footer-title { + margin: 0; +} + +#heo-footer .random-friends-btn { + display: flex; +} + #heo-footer .footer-title { color: var(--heo-secondtext); font-size: 0.8rem; @@ -12893,10 +15096,10 @@ span.hexo-douban-pagenum { display: flex; overflow: hidden; z-index: 1002; - transition: all 0.3s ease 0s; + transition: 0.3s; } -[data-theme="dark"] #footer-banner { +[data-theme=dark] #footer-banner { background: var(--heo-secondbg); } @@ -12905,7 +15108,7 @@ span.hexo-douban-pagenum { justify-content: space-between; max-width: 1400px; width: 100%; - margin: 0px auto; + margin: 0 auto; flex-wrap: wrap; align-items: center; } @@ -12920,12 +15123,12 @@ span.hexo-douban-pagenum { margin-right: 1rem; color: var(--heo-fontcolor); font-size: 0.8rem; - font-weight: 700; + font-weight: bold; white-space: nowrap; } #footer-banner .footer-banner-link.cc { - margin-right: 0px; + margin-right: 0rem; } #footer-banner .footer-banner-link.cc i { @@ -12950,10 +15153,12 @@ span.hexo-douban-pagenum { height: 0.9rem; } +/* about关于页 */ .la-widget.la-data-widget__container { border-radius: 12px; - box-shadow: var(--heo-shadow-border); border: var(--style-border) !important; + box-shadow: var(--heo-shadow-border); + border-color: var(--heo-card-border); } #about-page { @@ -12966,15 +15171,51 @@ span.hexo-douban-pagenum { #about-page .author-img { margin: auto; border-radius: 50%; - overflow: hidden; width: 180px; height: 180px; + position: relative; } +#about-page .author-img img { + border-radius: 200px; +} + +#about-page .author-img::before { + content: ''; + -webkit-transition: 1s; + -moz-transition: 1s; + -o-transition: 1s; + -ms-transition: 1s; + transition: 1s; + width: 30px; + height: 30px; + background: var(--heo-green); + position: absolute; + border-radius: 50%; + border: 5px solid var(--heo-background); + bottom: 5px; + right: 10px; + z-index: 2; +} + +@media screen and (max-width: 768px) { + #about-page .author-img { + width: 120px; + height: 120px; + } + + #about-page .author-img::before { + bottom: -5px; + right: -5px; + } +} + + #about-page .author-title { font-size: 2rem; - font-weight: 700; - margin-top: 1rem; + font-weight: bold; + margin: 1rem 0; + line-height: 1; } .page-title { @@ -12990,6 +15231,8 @@ span.hexo-douban-pagenum { white-space: nowrap; } +/* 一行内容 */ + .author-content { display: flex; flex-wrap: wrap; @@ -12998,6 +15241,8 @@ span.hexo-douban-pagenum { margin-top: 1rem; } +/* 一行内容，纵向组件 */ + .author-content-item-group.column { display: flex; flex-direction: column; @@ -13005,6 +15250,8 @@ span.hexo-douban-pagenum { justify-content: space-between; } +/* 一行内容，横向组件 */ + .author-content-item { width: 49%; border-radius: 24px; @@ -13022,7 +15269,7 @@ span.hexo-douban-pagenum { .author-content-item .author-content-item-title { font-size: 36px; - font-weight: 700; + font-weight: bold; line-height: 1; } @@ -13034,9 +15281,9 @@ span.hexo-douban-pagenum { @media screen and (max-width: 768px) { .author-content-item { + width: 100% !important; margin-top: 1rem; padding: 1rem; - width: 100% !important; } .author-content-item-group.column { @@ -13044,7 +15291,7 @@ span.hexo-douban-pagenum { } .author-content { - margin-top: 0px; + margin-top: 0rem; } } @@ -13052,20 +15299,69 @@ span.hexo-douban-pagenum { font-size: 12rem; opacity: 0.2; position: absolute; - right: 0px; + right: 0; bottom: -40%; transform: rotate(30deg); - transition: all 2s ease-in-out 0s; + transition: 2s ease-in-out; } .author-content-item:hover .card-background-icon { transform: rotate(20deg); } +/* 关于页面打招呼信息 */ + +#about-page .myInfoAndSayHello { + display: flex; + flex-direction: column; + justify-content: center; + color: var(--heo-white); + background: linear-gradient(120deg, rgba(91, 39, 255, 1) 0%, rgba(0, 212, 255, 1) 100%); + background-size: 200%; + animation: gradient 15s ease infinite; + width: 59%; +} + +#about-page .myInfoAndSayHello .title1 { + opacity: 0.8; + line-height: 1.3; +} + +#about-page .myInfoAndSayHello .title2 { + font-size: 36px; + font-weight: bold; + line-height: 1.1; + margin: 0.5rem 0; +} + +.author-content-item-group.column.mapAndInfo { + width: 59%; +} + +/* 关于页面地图 */ + +.author-content-item.map { + background: url(https://img.zhheo.com/i/2022/08/31/630ef8e827401.webp) no-repeat center; + min-height: 160px; + max-height: 400px; + position: relative; + overflow: hidden; + margin-bottom: 0.5rem; + height: 60%; + background-size: 100%; + transition: 1s ease-in-out; +} + +[data-theme=dark] .author-content-item.map { + background: url(https://img.zhheo.com/i/2022/08/31/630ef8db0fefe.webp) no-repeat center; + background-size: 100%; +} + .author-content-item.map:hover { background-size: 120%; - transition: all 4s ease-in-out 0s; - background-position: 0px 36%; + transition: 4s ease-in-out; + background-position-x: 0; + background-position-y: 36%; } .author-content-item.map .map-title { @@ -13076,7 +15372,8 @@ span.hexo-douban-pagenum { background: var(--heo-maskbg); padding: 0.5rem 2rem; backdrop-filter: saturate(180%) blur(20px); - transition: all 1s ease-in-out 0s; + -webkit-backdrop-filter: blur(20px); + transition: 1s ease-in-out; font-size: 20px; } @@ -13085,7 +15382,7 @@ span.hexo-douban-pagenum { } .author-content-item.map .map-title b { - color: var(--font-color); + color: var(--heo-fontcolor); } @media screen and (max-width: 768px) { @@ -13098,6 +15395,8 @@ span.hexo-douban-pagenum { } } +/* 关于页面自我信息 */ + .author-content-item.selfInfo { display: flex; min-height: 100px; @@ -13105,6 +15404,7 @@ span.hexo-douban-pagenum { justify-content: space-between; align-items: center; flex-wrap: wrap; + height: -webkit-fill-available; height: 40%; } @@ -13117,7 +15417,7 @@ span.hexo-douban-pagenum { .author-content-item.selfInfo div { display: flex; flex-direction: column; - margin: 0.5rem 2rem 0.5rem 0px; + margin: 0.5rem 2rem 0.5rem 0; } .author-content-item.selfInfo .selfInfo-title { @@ -13128,11 +15428,13 @@ span.hexo-douban-pagenum { } .author-content-item.selfInfo .selfInfo-content { - font-weight: 700; + font-weight: bold; font-size: 34px; line-height: 1; } +/* 关于页面我的照片 */ + .author-content-item.myphoto { height: 60%; min-height: 240px; @@ -13149,12 +15451,12 @@ span.hexo-douban-pagenum { height: 100%; min-width: 100%; object-fit: cover; - transition: all 0.6s ease 0s; + transition: 0.6s; } .author-content-item.myphoto:hover img { min-width: 105%; - transition: all 2s ease 0s; + transition: 2s; } .author-content-item.myphoto .myphoto-title { @@ -13165,18 +15467,20 @@ span.hexo-douban-pagenum { background: var(--heo-maskbgdeep); padding: 0.5rem 2rem; backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); } +/* 关于页面我的生涯图片 */ .author-content-item.careers { min-height: 400px; } .author-content-item.careers img { position: absolute; - left: 0px; + left: 0; bottom: 20px; width: 100%; - transition: all 0.6s ease 0s; + transition: 0.6s; } .author-content-item.careers .careers-group { @@ -13199,6 +15503,8 @@ span.hexo-douban-pagenum { color: var(--heo-secondtext); } +/* 关于页面我的性格 */ + .author-content-item.personalities { overflow: hidden; position: relative; @@ -13207,7 +15513,7 @@ span.hexo-douban-pagenum { .author-content-item.personalities .title2 { font-size: 36px; - font-weight: 700; + font-weight: bold; line-height: 1.1; } @@ -13215,7 +15521,7 @@ span.hexo-douban-pagenum { position: absolute; right: -40px; bottom: -10rem; - transition: transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02) 0s; + transition: transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02); } .author-content-item.personalities:hover .image { @@ -13232,9 +15538,11 @@ span.hexo-douban-pagenum { } } +/* 关于页面座右铭 */ + .author-content-item.maxim { font-size: 36px; - font-weight: 700; + font-weight: bold; line-height: 1.1; display: flex; align-items: flex-start; @@ -13254,17 +15562,21 @@ span.hexo-douban-pagenum { margin-bottom: 0.5rem; } +/* 关于页面特长 */ + .author-content-item.buff { + height: 200px; font-size: 36px; - font-weight: 700; + font-weight: bold; line-height: 1.1; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; - background: linear-gradient(120deg, rgb(255, 39, 232) 0px, rgb(255, 128, 0) 100%) 0% 0% / 200%; + background: linear-gradient(120deg, rgba(255, 39, 232, 1) 0%, rgba(255, 128, 0, 1) 100%); color: var(--heo-white); - animation: 15s ease 0s infinite normal none running gradient; + background-size: 200%; + animation: gradient 15s ease infinite; min-height: 200px; height: fit-content; width: 59%; @@ -13287,26 +15599,27 @@ span.hexo-douban-pagenum { margin-bottom: 0.5rem; } +/* 关于页面我的技能 */ .author-content-item.skills { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; - width: 50%; + width: 49%; min-height: 450px; } .author-content-item.skills .tags-group-all { display: flex; transform: rotate(0deg); - transition: all 0.3s ease 0s; + transition: 0.3s; } .author-content-item.skills .tags-group-wrapper { margin-top: 40px; display: flex; flex-wrap: nowrap; - animation: 60s linear 0s infinite normal none running rowup; + animation: rowup 60s linear infinite; } .author-content-item.skills .skills-style-group { @@ -13316,12 +15629,13 @@ span.hexo-douban-pagenum { .author-content-item.skills .skills-list { display: flex; opacity: 0; - transition: all 0.3s ease 0s; + transition: 0.3s; position: absolute; width: 100%; - top: 0px; - left: 0px; - flex-flow: row wrap; + top: 0; + left: 0; + flex-wrap: wrap; + flex-direction: row; margin-top: 10px; } @@ -13366,9 +15680,11 @@ span.hexo-douban-pagenum { } .author-content-item.skills .skill-name { - font-weight: 700; + font-weight: bold; } +/* 关于页面滚动 */ + .author-content-item.aboutsiteTips { display: flex; justify-content: center; @@ -13383,8 +15699,8 @@ span.hexo-douban-pagenum { font-family: Helvetica; line-height: 1.06; letter-spacing: -0.02em; - color: var(--font-color); - margin-top: 0px; + color: var(--heo-fontcolor); + margin-top: 0; } .aboutsiteTips .mask { @@ -13401,6 +15717,7 @@ span.hexo-douban-pagenum { top: 36px; padding-bottom: var(--offset); background-size: 100% 100%; + -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-repeat: no-repeat; @@ -13408,51 +15725,56 @@ span.hexo-douban-pagenum { .aboutsiteTips .mask span[data-show] { transform: translateY(-100%); - transition: transform 0.5s ease-in-out 0s; + transition: .5s transform ease-in-out; } .aboutsiteTips .mask span[data-up] { transform: translateY(-200%); - transition: transform 0.5s ease-in-out 0s; + transition: .5s transform ease-in-out; } .aboutsiteTips .mask span:nth-child(1) { - background-image: linear-gradient(45deg, rgb(14, 207, 254) 50%, rgb(7, 166, 241)); + background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1); } .aboutsiteTips .mask span:nth-child(2) { - background-image: linear-gradient(45deg, rgb(24, 225, 152) 50%, rgb(14, 193, 93)); + background-image: linear-gradient(45deg, #18e198 50%, #0ec15d); } .aboutsiteTips .mask span:nth-child(3) { - background-image: linear-gradient(45deg, rgb(138, 124, 251) 50%, rgb(99, 62, 156)); + background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c); } .aboutsiteTips .mask span:nth-child(4) { - background-image: linear-gradient(45deg, rgb(250, 118, 113) 50%, rgb(244, 95, 127)); + background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f); } @media screen and (max-width: 768px) { + .author-content-item.map { - margin-bottom: 0px; + margin-bottom: 0; } } +/* 关于51la页面统计 */ + #about-page .about-statistic { min-height: 380px; width: 39%; + background: url(https://img.zhheo.com/i/2022/09/23/632d5d8f37e90.webp) no-repeat top; + background-size: cover; color: var(--heo-white); overflow: hidden; } #about-page .about-statistic::after { - box-shadow: rgb(15, 17, 20) 0px -159px 173px 71px inset; + box-shadow: 0 -159px 173px 71px #0f1114 inset; position: absolute; - content: ""; + content: ''; width: 100%; height: 100%; - top: 0px; - left: 0px; + top: 0; + left: 0; } #statistic { @@ -13462,7 +15784,8 @@ span.hexo-douban-pagenum { color: var(--heo-white); display: flex; justify-content: space-between; - flex-flow: row wrap; + flex-direction: row; + flex-wrap: wrap; margin-top: 1rem; margin-bottom: 2rem; } @@ -13481,45 +15804,51 @@ span.hexo-douban-pagenum { } #statistic div span:last-child { - font-weight: 700; + font-weight: bold; font-size: 34px; line-height: 1; white-space: nowrap; } .author-content-item.about-statistic .card-content .banner-button-group .banner-button:hover { - background: rgb(153, 140, 90); + background: #998c5a; color: var(--heo-white); } +/* 关于页面赞赏 */ + .author-content-item.single.reward .author-content-item .author-content-item-title { color: var(--heo-red); } .author-content-item.single.reward .reward-list-all { display: flex; - flex-flow: row wrap; - margin: 1rem -0.25rem 0.5rem; + flex-wrap: wrap; + flex-direction: row; + margin-top: 1rem; + margin-bottom: 0.5rem; + margin-left: -0.25rem; + margin-right: -0.25rem; } .author-content-item.single.reward .reward-list-all .reward-list-item { padding: 1rem; border-radius: 12px; border: var(--style-border-always); - width: calc(16.6667% - 0.5rem); - margin: 0px 0.25rem 0.5rem; + width: calc((100% / 6) - 0.5rem); + margin: 0rem 0.25rem 0.5rem 0.25rem; box-shadow: var(--heo-shadow-border); } @media screen and (max-width: 1200px) { .author-content-item.single.reward .reward-list-all .reward-list-item { - width: calc(25% - 0.5rem); + width: calc((100% / 4) - 0.5rem); } } @media screen and (max-width: 900px) { .author-content-item.single.reward .reward-list-all .reward-list-item { - width: calc(50% - 0.5rem); + width: calc((100% / 2) - 0.5rem); } } @@ -13536,7 +15865,7 @@ span.hexo-douban-pagenum { .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-name { font-size: 1rem; - font-weight: 700; + font-weight: bold; line-height: 1; margin-bottom: 0.5rem; } @@ -13549,7 +15878,7 @@ span.hexo-douban-pagenum { .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-money { padding: 4px; - background: var(--font-color); + background: var(--heo-fontcolor); color: var(--card-bg); font-size: 12px; line-height: 1; @@ -13583,7 +15912,7 @@ span.hexo-douban-pagenum { display: flex; align-items: center; z-index: 1; - transition: all 0.3s ease 0s; + transition: .3s; cursor: pointer; box-shadow: none; width: fit-content; @@ -13603,7 +15932,10 @@ span.hexo-douban-pagenum { } .author-content-item.single.reward .post-reward .reward-main { - inset: 60px 0px auto auto; + top: 60px; + right: 0; + left: auto; + bottom: auto; width: fit-content; box-shadow: var(--heo-shadow-border); } @@ -13617,12 +15949,22 @@ span.hexo-douban-pagenum { display: none; } +/* 喜欢的游戏 lol */ +.author-content-item.game-lol { + background: url(https://img.zhheo.com/i/2022/08/31/630efa7ae39fe.webp) no-repeat top; + background-size: cover; + min-height: 300px; + overflow: hidden; + color: var(--heo-white); + width: 59%; +} + .author-content-item .card-content { position: absolute; width: 100%; height: 100%; - top: 0px; - left: 0px; + top: 0; + left: 0; z-index: 2; display: flex; flex-direction: column; @@ -13635,6 +15977,16 @@ span.hexo-douban-pagenum { } } +.author-content-item.game-lol::after { + box-shadow: 0 -69px 203px 11px #04120f inset; + position: absolute; + content: ''; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + .author-content-item .content-bottom { margin-top: auto; display: flex; @@ -13653,6 +16005,61 @@ span.hexo-douban-pagenum { margin-right: 0.5rem; } +.icon-pos-sup { + background: url('https://img.zhheo.com/i/2022/08/25/63074b68d9f4c.png'); +} + +.icon-pos-mid { + background: url('https://img.zhheo.com/i/2022/08/25/63074b54d2731.png'); +} + +/* 喜欢的游戏 狼人杀 */ +.author-content-item.game-wolf { + width: 39%; + background: url(https://img.zhheo.com/i/2022/08/31/630efa916a851.webp) no-repeat top; + background-size: cover; + min-height: 300px; + overflow: hidden; + color: var(--heo-white); +} + +.author-content-item.game-wolf::after { + box-shadow: 0 -69px 203px 11px #415dc9 inset; + position: absolute; + content: ''; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + +/* 关注领域 */ +.author-content-item.like-technology { + background: url(https://img.zhheo.com/i/2022/08/31/630efac3ecef3.webp) no-repeat; + background-size: cover; + min-height: 230px; + color: var(--heo-white); +} + +/* 喜欢音乐 */ +.author-content-item.like-music { + background: url(https://img.zhheo.com/i/2022/08/31/630efae141e9a.webp) no-repeat top; + background-size: cover; + min-height: 400px; + color: var(--heo-white); + overflow: hidden; +} + +.author-content-item.like-music::after { + box-shadow: 0 -69px 203px 11px #736896 inset; + position: absolute; + content: ''; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + .author-content-item .card-content .author-content-item-title { margin-bottom: 0.5rem; } @@ -13673,9 +16080,10 @@ span.hexo-douban-pagenum { display: flex; align-items: center; z-index: 1; - transition: all 0.3s ease 0s; + transition: .3s; cursor: pointer; backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); } .author-content-item .card-content .banner-button-group .banner-button:hover { @@ -13695,14 +16103,14 @@ span.hexo-douban-pagenum { } .author-content-item .card-content .banner-button-group .banner-button { - background: 0px 0px; + background: none; color: var(--heo-white); - padding: 0px; + padding: 0; width: fit-content; } .author-content-item .card-content .banner-button-group .banner-button i { - margin-right: 0px; + margin-right: 0; font-size: 1.5rem; } @@ -13711,17 +16119,112 @@ span.hexo-douban-pagenum { } } +/* 豆瓣电影页面 */ +.author-content-item.single.like-movie { + height: 19rem; + background: url(https://img.zhheo.com/i/2022/09/27/633289920d1c7.webp) no-repeat top; + background-size: cover; + color: var(--heo-white); + overflow: hidden; +} + +.author-content-item.single.like-movie::after { + box-shadow: 0 21px 133px 81px #1c1c1c inset; + position: absolute; + content: ''; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + +#article-container .author-content-item.single.like-movie .banner-button-group .banner-button { + padding: 8px 12px; + background: var(--heo-white); + border-radius: 12px; + color: var(--heo-black); + display: flex; + align-items: center; + z-index: 1; + transition: 0.3s; + cursor: pointer; + border: none; +} + +#article-container .author-content-item.single.like-movie .banner-button-group .banner-button:hover { + background: #d0b247; + color: var(--heo-white); +} + +#article-container .author-content-item.single.like-movie .banner-button-group .banner-button i { + margin-right: 8px; + font-size: 1rem; +} + +@media screen and (max-width: 768px) { + #article-container .author-content-item.single.like-movie .banner-button-group { + right: 1rem; + bottom: 1rem; + } + + #article-container .author-content-item.single.like-movie .banner-button-group .banner-button { + background: none; + color: var(--heo-white); + padding: 0; + } + + #article-container .author-content-item.single.like-movie .banner-button-group .banner-button i { + margin-right: 0; + font-size: 1.5rem; + } + + #article-container .author-content-item.single.like-movie .banner-button-group .banner-button-text { + display: none; + } +} + +/* 工具推荐 */ +.author-content.author-content-item.toolPage { + height: 19rem; + background: url(https://img.zhheo.com/i/2022/08/26/6308d5778ba3c.jpg) no-repeat top; + background-size: cover; + color: var(--heo-white); + overflow: hidden; + margin-top: 0; +} + +/* 友链鱼塘 */ +.author-content.author-content-item.momentsPage { + height: 19rem; + background: url(https://img.zhheo.com/i/2022/08/26/6308d5b137881.jpg) no-repeat top; + background-size: cover; + color: var(--heo-white); + overflow: hidden; + margin-top: 0; +} + +/* 即刻短文 */ +.author-content.author-content-item.essayPage { + height: 19rem; + background: url(https://img.zhheo.com/i/2022/08/27/6309587509a02.jpg) no-repeat center; + background-size: cover; + color: var(--heo-white); + overflow: hidden; + margin-top: 0; +} + +/* 中控台 */ #console { display: flex; position: fixed; width: 100vw; height: 100vh; - top: 0px; - left: 0px; + top: 0; + left: 0; z-index: 9999; justify-content: center; opacity: 0; - transition: all 0.3s ease-out 0s; + transition: 0.3s ease-out; flex-direction: column; align-items: center; pointer-events: none; @@ -13736,15 +16239,49 @@ span.hexo-douban-pagenum { display: flex; justify-content: space-between; align-items: center; - margin: 0px 30px; + margin: 0 30px; max-width: 2000px; + transform: translateY(20px); + transition: 0.3s; + opacity: 0; +} + +#console.show .console-card-group { + transform: translateY(0px); + opacity: 1; + transition-delay: 0.1s; +} + + +#console .console-card-group-left { + margin-right: 0.5rem; + width: 40%; + height: 100%; +} + +#console .console-card-group-right { + display: flex; + flex-direction: column; + justify-content: center; + height: 100%; + width: 60%; + overflow: hidden; } @media screen and (max-width: 1300px) { #console .console-card-group { + justify-content: center; + } + + #console .console-card-group-left { display: none; } + #console .console-card-group-right { + width: 100%; + margin: 0; + } + #consoleMusic { display: none; } @@ -13754,6 +16291,16 @@ span.hexo-douban-pagenum { } } +@media screen and (max-width: 768px) { + #console .console-card-group { + display: none; + } + + #consoleHideAside { + display: none; + } +} + @media screen and (max-height: 800px) { #console .console-card-group { display: none; @@ -13781,37 +16328,25 @@ span.hexo-douban-pagenum { height: calc(100% - 172px); } -#console .console-card-group-left { - margin-right: 0.5rem; - width: 40%; - height: 100%; -} - -#console .console-card-group-right { - display: flex; - flex-direction: column; - justify-content: center; - height: 100%; - width: 60%; - overflow: hidden; -} #console .console-mask { background: var(--heo-maskbgdeep); backdrop-filter: saturate(100%) blur(0px); + -webkit-backdrop-filter: blur(0px); width: 100vw; height: 100vh; - top: 0px; - left: 0px; + top: 0; + left: 0; position: absolute; z-index: -1; - transition: all 0.3s ease 0s; - backface-visibility: hidden; - transform-style: preserve-3d; + transition: 0.3s; + -webkit-backface-visibility: hidden; + -webkit-transform-style: preserve-3d; } #console.show .console-mask { backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); } #card-newest-comments .aside-list-item .thumbnail img { @@ -13843,9 +16378,9 @@ span.hexo-douban-pagenum { } #console .author-content-item-tips { - opacity: 0.8; - font-size: 0.6rem; - margin-bottom: 0.5rem; + opacity: .8; + font-size: .6rem; + margin-bottom: .5rem; } #console .author-content-item-title { @@ -13884,14 +16419,15 @@ span.hexo-douban-pagenum { #console .aside-list { display: flex; - flex-flow: row wrap; + flex-wrap: wrap; + flex-direction: row; justify-content: space-between; margin-top: 1.5rem; } #console .button-group { display: flex; - margin: 1rem auto 0px; + margin: 1rem auto 0 auto; justify-content: center; width: fit-content; } @@ -13899,7 +16435,7 @@ span.hexo-douban-pagenum { #console .button-group .console-btn-item { width: 60px; height: 60px; - transition: all 0.3s ease 0s; + transition: 0.3s; cursor: pointer; } @@ -13920,13 +16456,13 @@ span.hexo-douban-pagenum { display: flex; align-items: center; justify-content: center; - color: var(--font-color); + color: var(--heo-fontcolor); } #console .button-group .console-btn-item.on a { background: var(--heo-orange); color: var(--heo-white); - transition: all 0.3s ease 0s; + transition: 0.3s; } #console .button-group .console-btn-item a:hover { @@ -13944,14 +16480,14 @@ span.hexo-douban-pagenum { } .console-card.tags .card-tag-cloud a { + color: var(--heo-fontcolor) !important; margin: 6px 4px; padding: 2px 8px; border-radius: 8px; background: var(--heo-secondbg); border: var(--style-border); - font-weight: 700; - color: var(--font-color) !important; font-size: 14px !important; + font-weight: bold; } .console-card.tags .card-tag-cloud a:hover { @@ -13964,15 +16500,16 @@ span.hexo-douban-pagenum { } #console .close-btn { - width: 60px; - height: 60px; - position: absolute; - right: 40px; - top: 40px; - font-size: 40px; - color: var(--font-color); + width: 35px; + height: 35px; + position: fixed; + right: 100px; + top: 50px; + font-size: 35px; + color: var(--heo-fontcolor); cursor: pointer; - transition: all 0.3s ease 0s; + transition: 0.3s; + display: flex; } #console .close-btn:hover { @@ -13981,10 +16518,11 @@ span.hexo-douban-pagenum { #console .console-card.history { margin-top: 8px; - padding: 0px; - background: 0px 0px; + padding: 0; + background: none; box-shadow: none; border: none; + overflow: hidden; } #console .console-card.history .item-headline { @@ -13993,8 +16531,9 @@ span.hexo-douban-pagenum { #console .console-card.history .card-archive-list { display: flex; - flex-flow: row wrap; + flex-direction: row; justify-content: space-between; + flex-wrap: wrap; } #console .console-card.history .card-archive-list li.card-archive-list-item { @@ -14003,13 +16542,13 @@ span.hexo-douban-pagenum { #console .console-card.history .card-archive-list .card-archive-list-link { border-radius: 8px; - margin: 4px 0px; + margin: 4px 0; display: flex; flex-direction: column; align-content: space-between; border: var(--style-border); background: var(--card-bg); - padding: 8px; + padding: 8px 16px; } #console .console-card.history .card-archive-list .card-archive-list-link:hover { @@ -14025,6 +16564,7 @@ span.hexo-douban-pagenum { font-size: 1rem; } +/* 快捷键窗口 */ #keyboard-tips { position: fixed; top: 80px; @@ -14037,15 +16577,16 @@ span.hexo-douban-pagenum { display: flex; flex-direction: column; backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: blur(20px); pointer-events: none; box-shadow: var(--heo-shadow-border); opacity: 0; - transition: all 0.3s ease 0s; + transition: 0.3s; } #keyboard-tips.show { opacity: 1; - transition: all 0.1s ease 0s; + transition: 0.1s; } #keyboard-tips .keybordList { @@ -14072,71 +16613,21 @@ span.hexo-douban-pagenum { } #keyboard-tips .keyGroup .key { - padding: 0.2em 0.4em; + padding: .2em .4em; font-family: inherit; background-color: var(--card-bg); - color: var(--font-color); + color: var(--heo-fontcolor); + border: var(--style-border); + border-color: var(--heo-secondtext); border-bottom: 2px solid var(--heo-secondtext); box-shadow: var(--heo-shadow-border); - border-radius: 0.25rem; + border-radius: .25rem; overflow-wrap: break-word; overflow-x: auto; font-weight: 500; - font-size: 0.875em; + font-size: .875em; margin-right: 4px; vertical-align: baseline; line-height: 1; height: 24px; -} - -:root { - --heo-main: var(--heo-theme) !important; -} - -:root { - --heo-main-op: var(--heo-theme-op) !important; -} - -:root { - --heo-main-op-deep: var(--heo-theme-op-deep) !important; -} - -:root { - --heo-main-none: var(--heo-theme-none) !important; -} - -:root { - --heo-main: #000000 !important; -} - -:root { - --heo-main-op: #00000023 !important; -} - -:root { - --heo-main-op-deep: #000000dd !important; -} - -:root { - --heo-main-none: #00000000 !important; -} - -:root { - --heo-main: var(--heo-theme) !important; -} - -:root { - --heo-main-op: var(--heo-theme-op) !important; -} - -:root { - --heo-main-op-deep: var(--heo-theme-op-deep) !important; -} - -:root { - --heo-main-none: var(--heo-theme-none) !important; -} - -:root { - --heo-snackbar-time: 3000ms !important; } \ No newline at end of file diff --git a/templates/modules/layouts/layout.html b/templates/modules/layouts/layout.html index c7211b37..1f63025b 100644 --- a/templates/modules/layouts/layout.html +++ b/templates/modules/layouts/layout.html @@ -11,6 +11,12 @@ // 页面类型 index,page,post,tag,category htmlType: [[${htmlType}]], postTitle: [[${htmlType == 'post' ? post.spec.title : ''}]], + isanchor: true, + isPost: [[${htmlType == 'post'}]], + isHome: [[${htmlType == 'index'}]], + isHighlightShrink: false, + isToc: [[${htmlType == 'post'}]] && document.getElementById("card-toc"), + postUpdate: '2022-11-04 20:08:15', Snackbar: { chs_to_cht: "你已切换为繁体", cht_to_chs: "你已切换为简体",