From c5b38bfe4b906fc06edba096ecd51b94048cb81d Mon Sep 17 00:00:00 2001 From: "1152958806@qq.com" <1152958806@qq.com> Date: Wed, 30 Aug 2023 22:36:52 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=87=E7=AD=BE-tag-hide?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/assets/js/custom.js | 25 +++ templates/assets/zhheo/custom.css | 43 +++++ templates/assets/zhheo/zhheoblog.css | 249 --------------------------- 3 files changed, 68 insertions(+), 249 deletions(-) diff --git a/templates/assets/js/custom.js b/templates/assets/js/custom.js index a2960c36..1230a6c5 100644 --- a/templates/assets/js/custom.js +++ b/templates/assets/js/custom.js @@ -539,6 +539,31 @@ document.addEventListener("DOMContentLoaded", () => { } ); + // tag-hide + customElements.define( + "hao-tag-hide", + class HaoCheckbox extends HTMLElement { + constructor() { + super(); + this.options = { + display: this.getAttribute("display") || '查看', + bg: this.getAttribute("bg") || '', + color: this.getAttribute("color") || '' + }; + let htmlStr = ` + + + ${this.innerHTML.trim().replace(/^(
)|(
)$/g, "")} + + `; + this.innerHTML = htmlStr; + } + + } + ); + customElements.define( "hao-dplayer", class HaoDplayer extends HTMLElement { diff --git a/templates/assets/zhheo/custom.css b/templates/assets/zhheo/custom.css index 4535050a..da0f3d4d 100644 --- a/templates/assets/zhheo/custom.css +++ b/templates/assets/zhheo/custom.css @@ -2424,4 +2424,47 @@ p.p.gray,span.p.gray { position: absolute; content: ""; background: #fff +} + +.hide-block>.hide-button,.hide-inline>.hide-button { + display: inline-block; + padding: 5px 18px; + background: #3b70fc; + color: var(--white) +} + +.hide-block>.hide-button:hover,.hide-inline>.hide-button:hover { + background-color: var(--btn-hover-color) +} + +.hide-block>.hide-button.open,.hide-inline>.hide-button.open { + display: none +} + +.hide-block>.hide-button.open+div,.hide-inline>.hide-button.open+div { + display: block +} + +.hide-block>.hide-button.open+span,.hide-inline>.hide-button.open+span { + display: inline +} + +.hide-block>.hide-content,.hide-inline>.hide-content { + display: none +} + +.hide { + display: none +} + +.hide-inline>.hide-button { + margin: 0 6px +} + +.hide-inline>.hide-content { + margin: 0 6px +} + +.hide-block { + margin: 0 0 16px } \ No newline at end of file diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css index 11cdf808..27f763dd 100644 --- a/templates/assets/zhheo/zhheoblog.css +++ b/templates/assets/zhheo/zhheoblog.css @@ -4704,154 +4704,6 @@ blockquote.pullquote.right { fill: rgba(255, 255, 255, 0.9) !important; } - - -.search-dialog { - position: fixed; - top: 5rem; - left: 50%; - z-index: 1001; - display: none; - margin-left: -15rem; - padding: 1rem; - width: 30rem; - background: var(--search-bg); - border-radius: 5px; -} - -@media screen and (max-width: 768px) { - .search-dialog { - top: 0px; - left: 0px; - margin: 0px; - width: 100%; - height: 100%; - } -} - -.search-dialog hr { - margin: 1rem auto; -} - -.search-dialog span.search-close-button { - position: absolute; - top: 0.8rem; - right: 1rem; - color: rgb(133, 133, 133); - font-size: 1.4em; - line-height: 1; - cursor: pointer; - transition: color 0.2s ease-in-out 0s; -} - -.search-dialog span.search-close-button:hover { - color: rgb(48, 122, 246); -} - -.search-dialog__title { - padding: 0px 0px 0.7rem; - color: rgb(48, 122, 246); - font-size: 1.4em; - line-height: 1; -} - -#search-mask { - position: fixed; - inset: 0px; - z-index: 1000; - display: none; - background: rgba(0, 0, 0, 0.6); -} - -#algolia-search .search-dialog { - animation: 0.5s ease 0s 1 normal none running titlescale; -} - -#algolia-search .search-dialog .ais-search-box { - margin: 0px auto; - max-width: 100%; - width: 100%; -} - -#algolia-search .search-dialog .ais-search-box input { - padding: 0.25rem 0.7rem; - outline: 0px; - border: 2px solid rgb(48, 122, 246); - border-radius: 2rem; - background: var(--search-bg); - color: var(--search-input-color); -} - -#algolia-search .search-dialog .ais-hits--item.algolia-hit-item { - position: relative; - padding-left: 1.2rem; -} - -#algolia-search .search-dialog .ais-hits--item.algolia-hit-item:hover::before { - border-color: rgb(255, 114, 66); -} - -#algolia-search .search-dialog .ais-hits--item.algolia-hit-item::before { - position: absolute; - top: 0.53em; - left: 0px; - width: 0.5em; - height: 0.5em; - border: 0.15rem solid rgb(48, 122, 246); - border-radius: 0.5em; - background: 0px 0px; - content: ""; - line-height: 0.5em; - transition: all 0.2s ease-in-out 0s; -} - -#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a { - display: block; - color: var(--search-result-title); - cursor: pointer; -} - -#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a:hover { - color: rgb(48, 122, 246); -} - -#algolia-search .search-dialog .ais-hits--item.algolia-hit-item em { - color: rgb(244, 116, 102); - font-weight: 700; -} - -#algolia-search .search-dialog .ais-pagination.pagination { - margin: 0.8rem 0px 0px; - padding: 0px; - text-align: center; -} - -#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item { - margin: 0px 0.2rem; - padding: 0px; -} - -#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item a { - display: inline-block; - min-width: 1.2rem; - height: 1.2rem; - text-align: center; - line-height: 1.2rem; -} - -#algolia-search .search-dialog .ais-pagination.pagination .ais-pagination--item.current a { - background: rgb(0, 121, 255); - color: rgb(238, 238, 238); - cursor: default; -} - -#algolia-search .search-dialog .algolia-logo { - padding-top: 2px; - width: 4rem; - height: 1.5rem; -} - - /* 全局 ---------------------------------------------------------------- */ @@ -6237,107 +6089,6 @@ i.fab { 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-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; -} - -#algolia-input-panel { - 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: 0.3s; -} - -.search-dialog:hover { - border: var(--style-border-hover); - box-shadow: var(--heo-shadow-theme); -} - -.search-dialog__title { - font-weight: bold; - color: var(--heo-main); -} - -#algolia-search .search-dialog .ais-hits--item.algolia-hit-item a:hover { - color: var(--heo-hovertext); -} - -#algolia-search .search-dialog .algolia-logo { - display: none; -} - -/* 搜索提示文字 */ -#algolia-tips { - padding-top: 12px; - color: var(--heo-secondtext); - right: 0; - margin: auto; -} - -.algolia-tips-text { - margin-left: 0.4rem; -} - -/* 搜索结果间距 */ -#algolia-search-results { - padding-top: 8px; -} - -#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: 0rem; - font-weight: bold; -} - -#algolia-search .search-dialog .ais-pagination.pagination { - margin: 0.2rem 0 0; -} - -#algolia-search .search-dialog .ais-hits--item.algolia-hit-item em { - color: var(--heo-theme); - 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);