From 022e899fa6ac530a694688afeb6b686f4fced18b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ckasuie=E2=80=9D?= Date: Thu, 25 Apr 2024 21:36:26 +0800 Subject: [PATCH] feat: v3 --- v3/css/desc.css | 91 ------------ v3/css/index.css | 345 +++++++++++++++++++++++++++++++++++-------- v3/css/patch.css | 21 --- v3/css/social.css | 121 --------------- v3/css/style.css | 314 --------------------------------------- v3/css/style.css.bak | 257 -------------------------------- v3/css/switch.css | 0 v3/css/temp.css | 20 --- v3/index.html | 147 ------------------ v3/js/desc.js | 21 --- v3/js/index.js | 135 ++++++++++++----- v3/js/style.js | 105 ------------- 12 files changed, 383 insertions(+), 1194 deletions(-) delete mode 100644 v3/css/desc.css delete mode 100644 v3/css/patch.css delete mode 100644 v3/css/social.css delete mode 100644 v3/css/style.css delete mode 100644 v3/css/style.css.bak delete mode 100644 v3/css/switch.css delete mode 100644 v3/css/temp.css delete mode 100644 v3/index.html delete mode 100644 v3/js/desc.js delete mode 100644 v3/js/style.js diff --git a/v3/css/desc.css b/v3/css/desc.css deleted file mode 100644 index d6c76f5..0000000 --- a/v3/css/desc.css +++ /dev/null @@ -1,91 +0,0 @@ -.d-kasuie { - display: unset; - width: 100%; - background-color: rgb(0 0 0 / 50%) !important; - border-radius: 18px; - padding: 16px; -} - -.hope-ui-light .d-kasuie { - background-color: rgba(255, 255, 255, 0.5) !important; -} - -/** 简介区域 */ -.d-kasuie-desc { - padding: 10px 0 25px; -} -.d-kasuie-desc > div { - line-height: 32px; - text-indent: 40px; -} - -/** tab栏区域 */ -.d-kasuie-nav { - position: relative; - height: 32px; -} -ul.d-kasuie-tabs { - list-style-type: none; - padding: 0; - display: flex; - align-items: center; -} -ul.d-kasuie-tabs li{ - width: 110px; - display: flex; - align-items: center; - justify-content: center; - flex-direction: row; - cursor: pointer; -} -ul.d-kasuie-tabs li svg { - stroke: rgb(24, 144, 255); - width: 24px; - height: 24px; - transform: translateX(100%); - transition: 0.4s ease all; -} -li.d-kasuie-tab-is-active { - color: white; -} -ul.d-kasuie-tabs li.d-kasuie-tab-is-active svg { - stroke: white; - transform: translateX(0px); -} -.link-text { - color: white; - margin-left: 7px; - opacity: 0; - transform: translateX(calc( 100% - 60px )); - transition: 0.3s ease all; - user-select: none; - height: 32px; - display: flex; - align-items: center; - z-index: 1; -} -li.d-kasuie-tab-is-active .link-text { - opacity: 1; - transform: translateX(0); - transition-delay: 0.1s; -} -.link-background { - position: absolute; - background: rgb(24, 144, 255); - border-radius: 18px; - width: 110px; - height: 100%; - z-index: 0; - transition: 0.4s cubic-bezier(0.7, 0, 0.38, 0.86) all; -} - -/** tab内容区域 */ -ul.d-kasuie-main { - padding: 16px 10px; -} -.d-kasuie-main > li { - display: none; -} -.d-kasuie-main > li.d-kasuie-main-is-active { - display: unset; -} diff --git a/v3/css/index.css b/v3/css/index.css index 2f2e3fe..0a523ed 100644 --- a/v3/css/index.css +++ b/v3/css/index.css @@ -1,87 +1,314 @@ -/** 底部 */ -.footer { - display: none !important; -} +:root { + --mio-main: 255, 255, 255; + --mio-text: 0, 0, 0; + --mio-primary: 100, 209, 226; + --mio-primary50: 63, 194, 214; + --mio-main-opacity: 0.3; + --hope-colors-info9: rgba(var(--mio-primary), 1); + --hope-colors-info4: rgba(var(--mio-primary), 1); + --hope-colors-info5: rgba(var(--mio-primary50), 1); + --hope-colors-info11: rgba(var(--mio-main), 1); -/** 鼠标样式 */ + .hope-ui-dark { + --mio-main: 0, 0, 0; + --mio-text: 255, 255, 255; + --mio-primary: 100, 209, 226; + --mio-primary50: 63, 194, 214; + --mio-main-opacity: 0.3; + --hope-colors-info9: rgba(var(--mio-primary), 1); + --hope-colors-info4: rgba(var(--mio-primary), 0.4); + --hope-colors-info5: rgba(var(--mio-primary50), 0.4); + --hope-colors-info11: rgba(var(--mio-primary50), 1); + } +} /** 背景 */ -body.hope-ui-light::before, body.hope-ui-dark::before { - content: ''; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - min-height: 100%; - background-attachment: fixed; - background: transparent url(../img/bg_main.webp) center center no-repeat; - background-size: cover; - transform: scale(1); -} -/*白天背景稍亮*/ -body.hope-ui-light::before { - filter: blur(5px) brightness(0.7); +body::before { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-position: center; + background-attachment: fixed; + background-size: cover; + background-repeat: no-repeat; + background-image: url(https://kasuie.cc/api/img/bg?size=regular); + z-index: 0; } -/*夜间背景稍暗*/ +/**白天背景稍亮*/ +body.hope-ui-light::before { + filter: blur(3px) brightness(0.7); +} +/**夜间背景稍暗*/ body.hope-ui-dark::before { - filter: blur(5px) brightness(0.25); + filter: blur(3px) brightness(0.3); +} + +@media screen and (max-width: 960px) { + body::before { + background-image: url(https://kasuie.cc/api/img/bg?type=mobile&size=regular); + } +} + +div#root { + position: relative; + z-index: 1; +} + +/**管理后台*/ +div#root div.hope-c-PJLV-iiLzBwx-css { + background: transparent; +} + +/**头部*/ +div#root div.hope-c-PJLV-iiLzBwx-css header { + background-color: rgba(var(--mio-main), 0.3); +} + +/**内容区*/ + +/**侧边栏*/ +div.hope-c-PJLV-ibpTetR-css > div:first-child { + background-color: rgba(var(--mio-main), 0.3); +} + +div.hope-c-PJLV-ibpTetR-css > div:first-child div.hope-c-PJLV-ibBheSN-css { + color: var(--mio-main); +} + +/**tag a*/ +div.hope-c-PJLV-ibpTetR-css > div:first-child a.hope-c-PJLV-ikmVjeJ-css { + color: rgba(var(--mio-primary)); + background-color: rgba(var(--mio-primary), 0.2); +} +/**暗色模式*/ +div.hope-c-PJLV-ibpTetR-css > div:first-child .hope-c-PJLV-ijrehjy-css { + background: rgba(var(--mio-main), 0.3); +} +/**亮色模式*/ +div.hope-c-PJLV-ibpTetR-css > div:first-child .hope-c-PJLV-ikaEncD-css { + background: rgba(var(--mio-primary), 0.3); +} + +/**主内容区*/ +/**卡片*/ +div.hope-c-PJLV-ibpTetR-css + div.hope-c-PJLV-ijycFhp-css + div.hope-c-PJLV-iiBrJnl-css, +div.hope-c-PJLV-ibpTetR-css + div.hope-c-PJLV-ijycFhp-css + div.hope-c-PJLV-iiVJRSE-css { + transition: all 0.2s ease-in-out; + background: rgba(var(--mio-main), 0.3); +} + +div.hope-c-PJLV-ibpTetR-css + div.hope-c-PJLV-ijycFhp-css + div.hope-c-PJLV-iiBrJnl-css:hover, +div.hope-c-PJLV-ibpTetR-css + div.hope-c-PJLV-ijycFhp-css + div.hope-c-PJLV-iiVJRSE-css:hover { + border-color: rgba(var(--mio-primary), 0.7); +} + +/**字段*/ +.hope-c-kvTTWD-hYRNAb-variant-filled { + background-color: rgba(var(--mio-main), 0.2); +} + +.hope-c-kvTTWD-hYRNAb-variant-filled:hover, +.hope-c-kvTTWD-hYRNAb-variant-filled:focus { + background-color: rgba(var(--mio-main), 0.7); + border-color: rgba(var(--mio-primary), 0.5); +} + +/**开关*/ +.hope-c-mHASU-byiOue-variant-filled { + color: rgb(var(--mio-primary), 0.5); + background-color: rgba(var(--mio-main), 0.2); +} + +.hope-c-mHASU-byiOue-variant-filled[data-checked] { + background-color: currentcolor; +} + +.hope-c-mHASU-byiOue-variant-filled[data-focus] { + box-shadow: 0 0 0 3px var(--mio-primary); + border-color: var(--mio-primary); +} + +/**头部*/ +div#root div.header { + background: transparent; +} + +div#root div.header .header-left { + width: 40px; + height: 40px; } -/** 头部区域 */ -.hope-ui-light .header .header-right > .hope-c-ivMHWx-hZistB-cv.hope-icon-button{ - background-color: rgba(255, 255, 255, 0.5) !important; +div#root div.header .header-right > button { + background: transparent; } -/** 主内容区域 */ -.hope-c-PJLV.hope-c-PJLV-iicyfOA-css { - z-index: 1; +div#root div.header svg { + color: rgba(var(--mio-primary)); } -/*主列表夜间模式透明*/ -.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css { - background-color: rgb(0 0 0 / 50%) !important; +/**内容部分*/ + +div#root div.body { + min-height: calc(100vh - 102px); +} + +/*导航部分*/ +div#root div.body nav.nav { + color: #fff; + background: transparent; +} +div#root div.body nav.nav::after { + background-color: transparent; +} + +/*列表部分*/ +div#root div.body div.obj-box { + background-color: rgba(var(--mio-main), var(--mio-main-opacity)); + min-height: 300px; + max-height: calc(100vh - 170px); + overflow-y: auto; + backdrop-filter: blur(5px); +} + +div#root div.body div.obj-box::-webkit-scrollbar { + width: 4px; + transition: all 0.3s ease-in-out; +} + +div#root div.body div.obj-box::-webkit-scrollbar-thumb { + cursor: pointer; + border-radius: 8px; + transition-duration: 150ms; + background: rgba(var(--mio-text), 0.15); + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); +} + +div#root div.body div.obj-box::-webkit-scrollbar-track { + border-radius: 8px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); + background: rgba(255, 255, 255, 0.05); +} + +div#root div.body div.obj-box::-webkit-scrollbar-thumb:hover { + background-color: rgba(var(--mio-primary), 0.4); +} + +div#root div.body div.obj-box span.hope-c-iojPKw svg { + color: rgba(var(--mio-main), 1); +} + +/*底部MD*/ +div#root div.body div.hope-c-PJLV-ikSuVsl-css, +div#root div.body .hope-c-PJLV-iiuDLME-css { + background-color: rgba(var(--mio-main), var(--mio-main-opacity)); + backdrop-filter: blur(5px); +} + +/**MD*/ +.markdown-body > ul > li::marker { + color: rgba(var(--mio-primary), 1); } -/*readme夜间模式透明*/ -.hope-c-PJLV.hope-c-PJLV-iiuDLME-css { - background-color: rgb(0 0 0 / 50%) !important; +/**侧边栏*/ +div#root div.body div.hope-c-PJLV-ieGWMbI-css { + background-color: rgba(var(--mio-main), var(--mio-main-opacity)); } -/*主列表白天透明*/ -.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css { - background-color: rgba(255, 255, 255, 0.5) !important; +div#root div.body div.hope-c-PJLV-ieGWMbI-css p.hope-c-PJLV-iZZmce-css { + background-color: rgba(var(--mio-primary), 0.7); } -/*readme白天透明*/ -.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css { - background-color: rgba(255, 255, 255, 0.5) !important; +div#root div.body div.hope-c-PJLV-ieGWMbI-css p.hope-c-PJLV-igSqJIB-css { + text-overflow: ellipsis; + overflow: hidden; + max-width: 200px; } -/*右下角侧边栏按钮透明*/ -.hope-c-PJLV-ijgzmFG-css { - background-color: rgba(255, 255, 255, 0.2) !important; +div#root div.body svg { + color: rgba(var(--mio-primary)); } -/*右下角侧边栏按钮白天透明*/ -body.hope-ui-light .hope-c-PJLV-ijgzmFG-css { - background-color: rgba(255, 255, 255, 0.7) !important; + +/**底部*/ +div#root div.footer { + display: none; +} + +/**工具栏*/ +div.left-toolbar-box, +div.center-toolbar { + z-index: 1; +} + +div.left-toolbar-box div.left-toolbar { + background-color: rgba(var(--mio-main), 0.8); +} + +div.left-toolbar-box div.left-toolbar svg.hope-icon, +div.left-toolbar-box svg.hope-icon { + color: rgba(var(--mio-primary)); +} + +div.left-toolbar-box div.left-toolbar svg.hope-icon:hover, +div.left-toolbar-box svg.hope-icon:hover { + color: rgba(255, 255, 255, 1); + background-color: rgba(var(--mio-primary)); +} + +/**返回顶部*/ +div.hope-c-PJLV-ihMpUpe-css { + background-color: rgba(var(--mio-primary)) !important; +} + +/**tooltip提示*/ +div.hope-tooltip { + color: rgba(255, 255, 255, 1); + background-color: rgba(var(--mio-primary), 1); +} + +/**加载图标*/ +div.hope-spinner { + color: rgba(var(--mio-primary)); } -/*白天模式代码块透明*/ -.hope-ui-light pre { - background-color: rgba(255, 255, 255, 0.1) !important; +/**menu下拉区域*/ +div.hope-menu__content { + background-color: rgba(var(--mio-main), var(--mio-main-opacity)); +} + +/**select下拉区域*/ +div.hope-c-XJURY { + background: rgba(var(--mio-main), 0.8); +} + +/**登录页*/ +div.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-ifJliWT-css, +div.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-igjRXTJ-css { + display: none; +} +div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-ibiABng-css, +div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-ihWgyFw-css { + background-color: transparent; } -/*夜间模式代码块透明*/ -.hope-ui-dark pre { - background-color: rgba(255, 255, 255, 0) !important; +/**登录框*/ +div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-iubUra-css, +div.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-ifjOQLV-css { + background-color: rgba(var(--mio-main), 0.5); + backdrop-filter: blur(5px); } -/** 屏幕宽度小于960用适合尺寸的背景图片 */ -@media screen and (max-width:960px) { - body.hope-ui-light::before, body.hope-ui-dark::before { - background: transparent url(../img/bg_main_m.webp) center center no-repeat; - background-size: cover; - } +div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-idKXllh-css a { + display: none; } diff --git a/v3/css/patch.css b/v3/css/patch.css deleted file mode 100644 index 20e8160..0000000 --- a/v3/css/patch.css +++ /dev/null @@ -1,21 +0,0 @@ -.footer { - position: fixed; - padding-top: 0; - bottom: 0; - display: flex !important; - - .mio-footer-main { - font-size: 14px; - transition: all 0.3s ease-in-out; - - > img { - width: 18px; - height: 18px; - border-radius: 50%; - } - - > a:hover { - text-decoration: underline; - } - } -} diff --git a/v3/css/social.css b/v3/css/social.css deleted file mode 100644 index 6972836..0000000 --- a/v3/css/social.css +++ /dev/null @@ -1,121 +0,0 @@ - - ul.d-kasuie-social { - display:flex; - align-items: center; - gap: 0 25px; - justify-content: flex-end; - padding: 20px 40px 0 0; - } - ul.d-kasuie-social li { - list-style:none; - } - ul.d-kasuie-social li a { - display: flex; - align-items: center; - justify-content: center; - position: relative; - width: 40px; - height: 40px; - transition:.5s; - } - ul.d-kasuie-social li a span { - position:absolute; - transition: transform .5s; - } - ul.d-kasuie-social li a img { - width: 24px; - height: 24px; - } - ul.d-kasuie-social li a span:nth-child(1), - ul.d-kasuie-social li a span:nth-child(3){ - width:100%; - height:2px; - background: #fff;; - } - ul.d-kasuie-social li a span:nth-child(1) { - top:0; - left:0; - transform-origin: right; - } - ul.d-kasuie-social li a:hover span:nth-child(1) { - transform: scaleX(0); - transform-origin: left; - transition:transform .5s; - } - - ul.d-kasuie-social li a span:nth-child(3) { - bottom:0; - left:0; - transform-origin: left; - } - ul.d-kasuie-social li a:hover span:nth-child(3) { - transform: scaleX(0); - transform-origin: right; - transition:transform .5s; - } - - ul.d-kasuie-social li a span:nth-child(2), - ul.d-kasuie-social li a span:nth-child(4){ - width:2px; - height:100%; - background: #fff; - } - .hope-ui-light ul.d-kasuie-social li a span { - background: rgb(24, 144, 255) !important; - } - ul.d-kasuie-social li a span:nth-child(2) { - top:0; - left:0; - transform:scale(0); - transform-origin: bottom; - } - ul.d-kasuie-social li a:hover span:nth-child(2) { - transform: scale(1); - transform-origin: top; - transition:transform .5s; - } - ul.d-kasuie-social li a span:nth-child(4) { - top:0; - right:0; - transform:scale(0); - transform-origin: top; - } - ul.d-kasuie-social li a:hover span:nth-child(4) { - transform: scale(1); - transform-origin: bottom; - transition:transform .5s; - } - - .facebook:hover { - color: #3b5998; - } - .facebook:hover span { - background: #3b5998; - } - .twitter:hover { - color: #1da1f2; - } - .twitter:hover span { - background: #1da1f2; - } - .instagram:hover { - color: #c32aa3; - } - .instagram:hover span { - background: #c32aa3; - } - .google:hover { - color: #dd4b39; - } - .google:hover span { - background: #dd4b39; - } - ul.d-kasuie-social li a .twitter { - color: #1da1f2; - } - ul.d-kasuie-social li a:hover:nth-child(3) { - color: #c32aa3; - } - ul.d-kasuie-social li a:hover:nth-child(4) { - color: #dd4b39; - } \ No newline at end of file diff --git a/v3/css/style.css b/v3/css/style.css deleted file mode 100644 index 0a523ed..0000000 --- a/v3/css/style.css +++ /dev/null @@ -1,314 +0,0 @@ -:root { - --mio-main: 255, 255, 255; - --mio-text: 0, 0, 0; - --mio-primary: 100, 209, 226; - --mio-primary50: 63, 194, 214; - --mio-main-opacity: 0.3; - --hope-colors-info9: rgba(var(--mio-primary), 1); - --hope-colors-info4: rgba(var(--mio-primary), 1); - --hope-colors-info5: rgba(var(--mio-primary50), 1); - --hope-colors-info11: rgba(var(--mio-main), 1); - - .hope-ui-dark { - --mio-main: 0, 0, 0; - --mio-text: 255, 255, 255; - --mio-primary: 100, 209, 226; - --mio-primary50: 63, 194, 214; - --mio-main-opacity: 0.3; - --hope-colors-info9: rgba(var(--mio-primary), 1); - --hope-colors-info4: rgba(var(--mio-primary), 0.4); - --hope-colors-info5: rgba(var(--mio-primary50), 0.4); - --hope-colors-info11: rgba(var(--mio-primary50), 1); - } -} - -/** 背景 */ -body::before { - content: ""; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-position: center; - background-attachment: fixed; - background-size: cover; - background-repeat: no-repeat; - background-image: url(https://kasuie.cc/api/img/bg?size=regular); - z-index: 0; -} - -/**白天背景稍亮*/ -body.hope-ui-light::before { - filter: blur(3px) brightness(0.7); -} -/**夜间背景稍暗*/ -body.hope-ui-dark::before { - filter: blur(3px) brightness(0.3); -} - -@media screen and (max-width: 960px) { - body::before { - background-image: url(https://kasuie.cc/api/img/bg?type=mobile&size=regular); - } -} - -div#root { - position: relative; - z-index: 1; -} - -/**管理后台*/ -div#root div.hope-c-PJLV-iiLzBwx-css { - background: transparent; -} - -/**头部*/ -div#root div.hope-c-PJLV-iiLzBwx-css header { - background-color: rgba(var(--mio-main), 0.3); -} - -/**内容区*/ - -/**侧边栏*/ -div.hope-c-PJLV-ibpTetR-css > div:first-child { - background-color: rgba(var(--mio-main), 0.3); -} - -div.hope-c-PJLV-ibpTetR-css > div:first-child div.hope-c-PJLV-ibBheSN-css { - color: var(--mio-main); -} - -/**tag a*/ -div.hope-c-PJLV-ibpTetR-css > div:first-child a.hope-c-PJLV-ikmVjeJ-css { - color: rgba(var(--mio-primary)); - background-color: rgba(var(--mio-primary), 0.2); -} -/**暗色模式*/ -div.hope-c-PJLV-ibpTetR-css > div:first-child .hope-c-PJLV-ijrehjy-css { - background: rgba(var(--mio-main), 0.3); -} -/**亮色模式*/ -div.hope-c-PJLV-ibpTetR-css > div:first-child .hope-c-PJLV-ikaEncD-css { - background: rgba(var(--mio-primary), 0.3); -} - -/**主内容区*/ -/**卡片*/ -div.hope-c-PJLV-ibpTetR-css - div.hope-c-PJLV-ijycFhp-css - div.hope-c-PJLV-iiBrJnl-css, -div.hope-c-PJLV-ibpTetR-css - div.hope-c-PJLV-ijycFhp-css - div.hope-c-PJLV-iiVJRSE-css { - transition: all 0.2s ease-in-out; - background: rgba(var(--mio-main), 0.3); -} - -div.hope-c-PJLV-ibpTetR-css - div.hope-c-PJLV-ijycFhp-css - div.hope-c-PJLV-iiBrJnl-css:hover, -div.hope-c-PJLV-ibpTetR-css - div.hope-c-PJLV-ijycFhp-css - div.hope-c-PJLV-iiVJRSE-css:hover { - border-color: rgba(var(--mio-primary), 0.7); -} - -/**字段*/ -.hope-c-kvTTWD-hYRNAb-variant-filled { - background-color: rgba(var(--mio-main), 0.2); -} - -.hope-c-kvTTWD-hYRNAb-variant-filled:hover, -.hope-c-kvTTWD-hYRNAb-variant-filled:focus { - background-color: rgba(var(--mio-main), 0.7); - border-color: rgba(var(--mio-primary), 0.5); -} - -/**开关*/ -.hope-c-mHASU-byiOue-variant-filled { - color: rgb(var(--mio-primary), 0.5); - background-color: rgba(var(--mio-main), 0.2); -} - -.hope-c-mHASU-byiOue-variant-filled[data-checked] { - background-color: currentcolor; -} - -.hope-c-mHASU-byiOue-variant-filled[data-focus] { - box-shadow: 0 0 0 3px var(--mio-primary); - border-color: var(--mio-primary); -} - -/**头部*/ -div#root div.header { - background: transparent; -} - -div#root div.header .header-left { - width: 40px; - height: 40px; -} - -div#root div.header .header-right > button { - background: transparent; -} - -div#root div.header svg { - color: rgba(var(--mio-primary)); -} - -/**内容部分*/ - -div#root div.body { - min-height: calc(100vh - 102px); -} - -/*导航部分*/ -div#root div.body nav.nav { - color: #fff; - background: transparent; -} -div#root div.body nav.nav::after { - background-color: transparent; -} - -/*列表部分*/ -div#root div.body div.obj-box { - background-color: rgba(var(--mio-main), var(--mio-main-opacity)); - min-height: 300px; - max-height: calc(100vh - 170px); - overflow-y: auto; - backdrop-filter: blur(5px); -} - -div#root div.body div.obj-box::-webkit-scrollbar { - width: 4px; - transition: all 0.3s ease-in-out; -} - -div#root div.body div.obj-box::-webkit-scrollbar-thumb { - cursor: pointer; - border-radius: 8px; - transition-duration: 150ms; - background: rgba(var(--mio-text), 0.15); - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); -} - -div#root div.body div.obj-box::-webkit-scrollbar-track { - border-radius: 8px; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); - background: rgba(255, 255, 255, 0.05); -} - -div#root div.body div.obj-box::-webkit-scrollbar-thumb:hover { - background-color: rgba(var(--mio-primary), 0.4); -} - -div#root div.body div.obj-box span.hope-c-iojPKw svg { - color: rgba(var(--mio-main), 1); -} - -/*底部MD*/ -div#root div.body div.hope-c-PJLV-ikSuVsl-css, -div#root div.body .hope-c-PJLV-iiuDLME-css { - background-color: rgba(var(--mio-main), var(--mio-main-opacity)); - backdrop-filter: blur(5px); -} - -/**MD*/ -.markdown-body > ul > li::marker { - color: rgba(var(--mio-primary), 1); -} - -/**侧边栏*/ -div#root div.body div.hope-c-PJLV-ieGWMbI-css { - background-color: rgba(var(--mio-main), var(--mio-main-opacity)); -} - -div#root div.body div.hope-c-PJLV-ieGWMbI-css p.hope-c-PJLV-iZZmce-css { - background-color: rgba(var(--mio-primary), 0.7); -} - -div#root div.body div.hope-c-PJLV-ieGWMbI-css p.hope-c-PJLV-igSqJIB-css { - text-overflow: ellipsis; - overflow: hidden; - max-width: 200px; -} - -div#root div.body svg { - color: rgba(var(--mio-primary)); -} - -/**底部*/ -div#root div.footer { - display: none; -} - -/**工具栏*/ -div.left-toolbar-box, -div.center-toolbar { - z-index: 1; -} - -div.left-toolbar-box div.left-toolbar { - background-color: rgba(var(--mio-main), 0.8); -} - -div.left-toolbar-box div.left-toolbar svg.hope-icon, -div.left-toolbar-box svg.hope-icon { - color: rgba(var(--mio-primary)); -} - -div.left-toolbar-box div.left-toolbar svg.hope-icon:hover, -div.left-toolbar-box svg.hope-icon:hover { - color: rgba(255, 255, 255, 1); - background-color: rgba(var(--mio-primary)); -} - -/**返回顶部*/ -div.hope-c-PJLV-ihMpUpe-css { - background-color: rgba(var(--mio-primary)) !important; -} - -/**tooltip提示*/ -div.hope-tooltip { - color: rgba(255, 255, 255, 1); - background-color: rgba(var(--mio-primary), 1); -} - -/**加载图标*/ -div.hope-spinner { - color: rgba(var(--mio-primary)); -} - -/**menu下拉区域*/ -div.hope-menu__content { - background-color: rgba(var(--mio-main), var(--mio-main-opacity)); -} - -/**select下拉区域*/ -div.hope-c-XJURY { - background: rgba(var(--mio-main), 0.8); -} - -/**登录页*/ -div.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-ifJliWT-css, -div.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-igjRXTJ-css { - display: none; -} -div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-ibiABng-css, -div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-ihWgyFw-css { - background-color: transparent; -} - -/**登录框*/ -div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-iubUra-css, -div.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-ifjOQLV-css { - background-color: rgba(var(--mio-main), 0.5); - backdrop-filter: blur(5px); -} - -div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-idKXllh-css a { - display: none; -} diff --git a/v3/css/style.css.bak b/v3/css/style.css.bak deleted file mode 100644 index 4528eb2..0000000 --- a/v3/css/style.css.bak +++ /dev/null @@ -1,257 +0,0 @@ -:root { - --mio-main: 255, 255, 255; - --mio-text: 0, 0, 0; - --mio-primary: 100, 209, 226; - --mio-primary50: 63, 194, 214; - --hope-colors-info9: rgba(var(--mio-primary), 1); - --hope-colors-info4: rgba(var(--mio-primary), 1); - --hope-colors-info5: rgba(var(--mio-primary50), 1); - --hope-colors-info11: rgba(var(--mio-main), 1); - - .hope-ui-dark { - --mio-main: 0, 0, 0; - --mio-text: 255, 255, 255; - --mio-primary: 100, 209, 226; - --mio-primary50: 63, 194, 214; - --hope-colors-info9: rgba(var(--mio-primary), 1); - --hope-colors-info4: rgba(var(--mio-primary), 0.4); - --hope-colors-info5: rgba(var(--mio-primary50), 0.4); - --hope-colors-info11: rgba(var(--mio-primary50), 1); - } -} - -body { - /** 背景 */ - &::before { - content: ""; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-position: center; - background-attachment: fixed; - background-size: cover; - background-repeat: no-repeat; - background-image: url(https://kasuie.cc/api/img/bg?size=regular); - z-index: 0; - } - - @media screen and (max-width: 960px) { - &::before { - background-image: url(https://kasuie.cc/api/img/bg?type=mobile&size=regular); - } - } - - /**白天背景稍亮*/ - &.hope-ui-light::before { - filter: blur(3px) brightness(0.7); - } - - /**夜间背景稍暗*/ - &.hope-ui-dark::before { - filter: blur(3px) brightness(0.3); - } - - div#root { - position: relative; - z-index: 1; - - /**管理后台*/ - div.hope-c-PJLV-iiLzBwx-css { - background: transparent; - - /**头部*/ - header { - background: rgba(var(--mio-main), 0.3); - } - - /**内容区*/ - div.hope-c-PJLV-ibpTetR-css { - /**侧边栏*/ - > div:first-child { - background-color: rgba(var(--mio-main), 0.3); - - div.hope-c-PJLV-ibBheSN-css { - color: var(--mio-main); - } - - /**tag a*/ - a.hope-c-PJLV-ikmVjeJ-css { - color: rgba(var(--mio-primary)); - background-color: rgba(var(--mio-primary), 0.2); - } - /**暗色模式*/ - .hope-c-PJLV-ijrehjy-css { - background: rgba(var(--mio-main), 0.3); - } - /**亮色模式*/ - .hope-c-PJLV-ikaEncD-css { - background: rgba(var(--mio-primary), 0.3); - } - } - /**主内容区*/ - div.hope-c-PJLV-ijycFhp-css { - /**卡片*/ - div.hope-c-PJLV-iiBrJnl-css, - div.hope-c-PJLV-iiVJRSE-css { - transition: all 0.2s ease-in-out; - background: rgba(var(--mio-main), 0.3); - - &:hover { - border-color: rgba(var(--mio-primary), 0.7); - } - } - } - } - - /**字段*/ - .hope-c-kvTTWD-hYRNAb-variant-filled { - background: rgba(var(--mio-main), 0.2); - - &:focus { - border-color: rgba(var(--mio-primary), 0.5); - } - } - /**开关*/ - .hope-c-mHASU-byiOue-variant-filled { - color: rgb(var(--mio-primary), 0.5); - background-color: rgba(var(--mio-main), 0.2); - - &[data-checked] { - background-color: currentcolor; - } - - &[data-focus] { - box-shadow: 0 0 0 3px var(--mio-primary); - border-color: var(--mio-primary); - } - } - } - - /**头部*/ - div.header { - background: transparent; - - .header-left { - width: 40px; - height: 40px; - } - - .header-right > button { - background: transparent; - } - - svg { - color: rgba(var(--mio-primary)); - } - } - - /**内容部分*/ - div.body { - /*导航部分*/ - nav.nav { - color: #fff; - background: transparent; - - &::after { - background-color: transparent; - } - } - /*列表部分*/ - div.obj-box { - background-color: rgba(var(--mio-main), 0.3); - min-height: 300px; - max-height: calc(100vh - 180px); - overflow-y: auto; - - &::-webkit-scrollbar { - width: 4px; - transition: all 0.3s ease-in-out; - } - - &::-webkit-scrollbar-thumb { - cursor: pointer; - border-radius: 8px; - transition-duration: 150ms; - background: rgba(var(--mio-text), 0.15); - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); - } - &::-webkit-scrollbar-track { - border-radius: 8px; - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); - background: rgba(255, 255, 255, 0.05); - } - &::-webkit-scrollbar-thumb:hover { - /**滚动条整体样式*/ - background-color: rgba(var(--mio-primary), 0.4); - } - - span.hope-c-iojPKw svg { - color: rgba(var(--mio-main), 1); - } - } - /**侧边栏*/ - div.hope-c-PJLV-ieGWMbI-css { - background-color: rgba(var(--mio-main), 0.3); - - p.hope-c-PJLV-iZZmce-css { - background-color: rgba(var(--mio-primary), 0.7); - } - - p.hope-c-PJLV-igSqJIB-css { - text-overflow: ellipsis; - overflow: hidden; - max-width: 200px; - } - } - - svg { - color: rgba(var(--mio-primary)); - } - } - - /**底部*/ - div.footer { - display: none; - } - } - /**工具栏*/ - div.left-toolbar-box { - z-index: 1; - - div.left-toolbar { - background-color: rgba(var(--mio-main), 0.8); - } - - svg.hope-icon { - color: rgba(var(--mio-primary)); - - &:hover { - color: rgba(255, 255, 255, 1); - background-color: rgba(var(--mio-primary)); - } - } - } - - /**tooltip提示*/ - div.hope-tooltip { - color: rgba(255, 255, 255, 1); - background-color: rgba(var(--mio-primary), 1); - } - - /**加载图标*/ - div.hope-spinner { - color: rgba(var(--mio-primary)); - } - - /**menu下拉区域*/ - div.hope-menu__content { - background-color: rgba(var(--mio-main), 0.3); - } - - /**select下拉区域*/ - div.hope-c-XJURY { - background: rgba(var(--mio-main), 0.8); - } -} diff --git a/v3/css/switch.css b/v3/css/switch.css deleted file mode 100644 index e69de29..0000000 diff --git a/v3/css/temp.css b/v3/css/temp.css deleted file mode 100644 index 144c0c2..0000000 --- a/v3/css/temp.css +++ /dev/null @@ -1,20 +0,0 @@ -.d-kasuie { - margin: 0; - padding: 0; - width: min(99%, 940px); - height: auto; - margin: 0 auto; -} -@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700"); -body, -html { - height: 100%; -} -body { - margin: 0; - display: flex; - align-items: center; - justify-content: center; - background: #e9ecff; - font-family: "Roboto"; -} \ No newline at end of file diff --git a/v3/index.html b/v3/index.html deleted file mode 100644 index 56dee65..0000000 --- a/v3/index.html +++ /dev/null @@ -1,147 +0,0 @@ - - - - - - - - - - - - - - diff --git a/v3/js/desc.js b/v3/js/desc.js deleted file mode 100644 index 88f170f..0000000 --- a/v3/js/desc.js +++ /dev/null @@ -1,21 +0,0 @@ -/* - * @Author: kasuie - * @Date: 2023-04-01 20:53:12 - * @LastEditors: kasuie - * @LastEditTime: 2023-04-01 22:35:55 - * @Description: - */ -const menus = document.querySelectorAll('ul.d-kasuie-tabs > li'); -const contents = document.querySelectorAll('ul.d-kasuie-main > li'); -const background = document.querySelector('.link-background'); -let isActiveIndex = 0; -menus.forEach((menu,index) => { - menu.addEventListener('click',(e) => { - background.style.transform = `translateX(${100 * index}%)`; - menus[isActiveIndex].classList.remove('d-kasuie-tab-is-active'); - e?.currentTarget.classList.add('d-kasuie-tab-is-active'); - index < contents?.length && contents[index].classList.add('d-kasuie-main-is-active'); - isActiveIndex < contents?.length && contents[isActiveIndex].classList.remove('d-kasuie-main-is-active'); - isActiveIndex = index; - }); -}) \ No newline at end of file diff --git a/v3/js/index.js b/v3/js/index.js index dc976fc..2fc48c3 100644 --- a/v3/js/index.js +++ b/v3/js/index.js @@ -1,46 +1,105 @@ /* * @Author: kasuie - * @Date: 2023-03-31 17:00:13 + * @Date: 2024-04-24 15:35:59 * @LastEditors: kasuie - * @LastEditTime: 2023-04-02 20:15:39 - * @Description: + * @LastEditTime: 2024-04-25 21:26:14 + * @Description: */ -let footer = false, desc = false, homeIcon = false; +let footer = false; -const setFooter = () => { - const target = document.querySelector(".footer > div"); - if (target) { - target.innerHTML = "© 2020 - 2023 By KASUIE"; - footer = true; - } -} -const setDesc = () => { - const self = document.querySelector(".d-kasuie"); - const target = document.querySelector(".body.hope-c-PJLV-iiHckfM-css"); - if (target) { - self.style.display = "unset"; - target.appendChild(self); - desc = true; +const footerStyle = ` + .footer { + position: fixed; + bottom: 0; + padding-bottom: 10px; + padding-top: 10px; + display: flex !important; + } + .mio-footer-main { + font-size: 14px; + transition: all 0.3s ease-in-out; + } + .mio-footer-main > img { + width: 18px !important; + height: 18px !important; + border-radius: 50%; + } + + .mio-footer-main > a:hover { + text-decoration: underline; + } + + .markdown-body li>p { + font-size: 14px; + margin-top: 10px; + margin-bottom: 0px; + } +`; +const onPatchStyle = (style) => { + const styleElement = document.createElement("style"); + styleElement.textContent = style; + const head = document.head || document.getElementsByTagName("head")[0]; + head.appendChild(styleElement); +}; + +const onCreateElement = (tag, attrs) => { + const dom = document.createElement(tag); + if (attrs && typeof attrs == "object") { + for (const key in attrs) { + if (Object.hasOwnProperty.call(attrs, key) && attrs[key]) { + dom.setAttribute(key, attrs[key]); + } } -} -// const setHomeIcon = () => { -// const homeIcon = document.querySelector("nav.nav > .hope-c-cPYwgm > li.hope-c-khZXrc"); -// if (homeIcon) { -// const homeIconA = homeIcon.getElementsByClassName("nav-link")[0]; -// homeIconA.innerHTML = "💙"; -// homeIcon.addEventListener("click", (e) => { -// const _homeIconA = document.querySelector("nav.nav > .hope-c-cPYwgm > li.hope-c-khZXrc > a.nav-link"); -// _homeIconA.innerHTML = "💙"; -// }) -// homeIcon = true; -// } -// } + } + return dom; +}; -let interval = setInterval(() => { - setFooter(); - setDesc(); - // setHomeIcon(); - if(footer && desc) { - clearInterval(interval); +const renderFooter = (data) => { + const target = document.querySelector(".footer > div"); + if (target) { + onPatchStyle(footerStyle); + target.innerHTML = ""; + target.classList.add("mio-footer-main"); + if (data?.length) { + for (let index = 0; index < data.length; index++) { + const { url: href, text, icon, target: aTarget } = data[index]; + const aDom = onCreateElement("a", { target: aTarget || null, href }); + const ImgDom = icon + ? onCreateElement("img", { + src: `https://api.iowen.cn/favicon/${new URL(href).host}.png`, + }) + : null; + aDom && (aDom.innerText = text); + if (index) { + const split = onCreateElement("span", null); + split.innerText = "|"; + split && target.appendChild(split); + } + ImgDom && target.appendChild(ImgDom); + aDom && target.appendChild(aDom); + } } -}, 200); \ No newline at end of file + footer = true; + } +}; + +const init = () => { + const footerDataDom = document.querySelector("#footer-data"); + if (footerDataDom) { + let footerData = JSON.parse( + document.querySelector("#footer-data").innerText + ); + let count = 0; + const interval = setInterval(() => { + if (footer || count > 10) clearInterval(interval); + ++count; + renderFooter(footerData); + }, 300); + } + // const navHome = document.querySelector(".hope-c-PJLV-ibMsOCJ-css"); + // if (navHome) { + // navHome.innerHTML = "✨"; + // } +}; + +init(); diff --git a/v3/js/style.js b/v3/js/style.js deleted file mode 100644 index 2fc48c3..0000000 --- a/v3/js/style.js +++ /dev/null @@ -1,105 +0,0 @@ -/* - * @Author: kasuie - * @Date: 2024-04-24 15:35:59 - * @LastEditors: kasuie - * @LastEditTime: 2024-04-25 21:26:14 - * @Description: - */ -let footer = false; - -const footerStyle = ` - .footer { - position: fixed; - bottom: 0; - padding-bottom: 10px; - padding-top: 10px; - display: flex !important; - } - .mio-footer-main { - font-size: 14px; - transition: all 0.3s ease-in-out; - } - .mio-footer-main > img { - width: 18px !important; - height: 18px !important; - border-radius: 50%; - } - - .mio-footer-main > a:hover { - text-decoration: underline; - } - - .markdown-body li>p { - font-size: 14px; - margin-top: 10px; - margin-bottom: 0px; - } -`; -const onPatchStyle = (style) => { - const styleElement = document.createElement("style"); - styleElement.textContent = style; - const head = document.head || document.getElementsByTagName("head")[0]; - head.appendChild(styleElement); -}; - -const onCreateElement = (tag, attrs) => { - const dom = document.createElement(tag); - if (attrs && typeof attrs == "object") { - for (const key in attrs) { - if (Object.hasOwnProperty.call(attrs, key) && attrs[key]) { - dom.setAttribute(key, attrs[key]); - } - } - } - return dom; -}; - -const renderFooter = (data) => { - const target = document.querySelector(".footer > div"); - if (target) { - onPatchStyle(footerStyle); - target.innerHTML = ""; - target.classList.add("mio-footer-main"); - if (data?.length) { - for (let index = 0; index < data.length; index++) { - const { url: href, text, icon, target: aTarget } = data[index]; - const aDom = onCreateElement("a", { target: aTarget || null, href }); - const ImgDom = icon - ? onCreateElement("img", { - src: `https://api.iowen.cn/favicon/${new URL(href).host}.png`, - }) - : null; - aDom && (aDom.innerText = text); - if (index) { - const split = onCreateElement("span", null); - split.innerText = "|"; - split && target.appendChild(split); - } - ImgDom && target.appendChild(ImgDom); - aDom && target.appendChild(aDom); - } - } - footer = true; - } -}; - -const init = () => { - const footerDataDom = document.querySelector("#footer-data"); - if (footerDataDom) { - let footerData = JSON.parse( - document.querySelector("#footer-data").innerText - ); - let count = 0; - const interval = setInterval(() => { - if (footer || count > 10) clearInterval(interval); - ++count; - renderFooter(footerData); - }, 300); - } - // const navHome = document.querySelector(".hope-c-PJLV-ibMsOCJ-css"); - // if (navHome) { - // navHome.innerHTML = "✨"; - // } -}; - -init();