Argon美化记录
YuHuan
|
|
43
|
1
|
日常

421 字
|
20 分钟

额外CSS

/*白天卡片背景透明*/
.card {
	background-color: rgba(255, 255, 255, 0.8) !important;
	/*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/
	-webkit-backdrop-filter: blur(6px);
}
 
/*夜间透明*/
html.darkmode .bg-white,
html.darkmode .card,
html.darkmode #footer {
	background: rgba(66, 66, 66, 0.9) !important;
}
 
html.darkmode #fabtn_blog_settings_popup {
	background: rgba(66, 66, 66, 0.95) !important;
}
 
/*小工具栏背景完全透明*/
/*小工具栏是card的子元素，如果用同一个透明度会叠加变色，故改为完全透明*/
.card .widget,
.darkmode .card .widget,
#post_content>div>div>div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title,
#custom_html-2 {
	background-color: #ffffff00 !important;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
 
.emotion-keyboard,
#fabtn_blog_settings_popup {
	background-color: rgba(255, 255, 255, 0.95) !important;
}
 
/*分类卡片透明*/
.bg-gradient-secondary {
	background: rgba(255, 255, 255, 0.1) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
 
/*分类卡片文本居中*/
#content>div.page-information-card-container>div>div {
	text-align: center;
}
 
/*提示条背景透明*/
.admonition,.collapse-block{
	background-color: transparent !important;
	backdrop-filter: contrast(130%);
}
 
/*左侧菜单栏突出颜色修改*/
.leftbar-menu-item>a:hover,
.leftbar-menu-item.current>a {
	background-color: #f9f9f980;
}
 
/*站点概览分隔线颜色修改*/
.site-state-item {
	border-left: 1px solid #aaa;
}
 
.site-friend-links-title {
	border-top: 1px dotted #aaa;
}
 
#leftbar_tab_tools ul li {
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: none;
}
 
html.darkmode #leftbar_tab_tools ul li {
	border-bottom: none;
}
 
/*左侧栏边距修改*/
.tab-content {
	padding: 10px 0px 0px 0px !important;
}
 
.site-author-links {
	padding: 0px 0px 0px 10px;
}
 
/*目录位置偏移修改*/
#leftbar_catalog {
	margin-left: 0px;
}
 
/*目录条目边距修改*/
#leftbar_catalog .index-link {
	padding: 4px 4px 4px 4px;
}
 
/*左侧栏小工具栏字体缩小*/
#leftbar_tab_tools {
	font-size: 14px;
}
 
/*正文图片边距修改*/
article figure {
	margin-top:0;
	margin-bottom: 1rem;
}
.wp-block-columns {
	margin-bottom:0;
}
 
/*正文表格样式修改*/
article table>tbody>tr>td,
article table>tbody>tr>th,
article table>tfoot>tr>td,
article table>tfoot>tr>th,
article table>thead>tr>td,
article table>thead>tr>th {
	padding: 8px 10px;
	border: 1px solid;
}
 
/*表格居中样式*/
.wp-block-table.aligncenter {
	margin: 10px auto;
}
 
/*特色图片文章标题*/
.post-header.post-header-with-thumbnail .post-header-text-container .post-title {
	font-weight: bold;
	color: #ffffff !important;
	text-shadow: 0px 0px 5px #000000 !important;
}
  
/*回顶图标放大*/
#fabtn_back_to_top,
#fabtn_go_to_comment,
#fabtn_toggle_blog_settings_popup,
#fabtn_toggle_sides,
#fabtn_open_sidebar,
#fabtn_toggle_darkmode {
	font-size: 1.2rem;
}
 
/*隐藏左移按钮*/
#fabtn_toggle_sides{display:none;}
 
/*顶栏菜单放大*/
.navbar-nav .nav-link {
	font-size: 1rem;
}
 
.navbar-nav .nav-item {
	margin-right: 0;
}
 
.mr-lg-5,
.mx-lg-5 {
	margin-right: 1rem !important;
}
 
.navbar-toggler-icon {
	width: 1.5rem;
	height: 1.5rem;
}
 
.navbar-expand-lg .navbar-nav .nav-link {
	padding-right: 0.9rem;
	padding-left: 1rem;
}
 
/*左侧栏头像自动缩放*/
#leftbar_overview_author_image:hover{
	transform: scale(1.2);
	filter: brightness(150%);
}
 
/*隐藏左侧栏搜索框*/
.leftbar-menu {display: none;}
.leftbar-search-button {display: none;}
#leftbar_part2_inner:before {display: none;}
@media screen and (min-width: 900px){
	.leftbar-banner {
	border-radius: var(--card-radius);
	}
}
 
/*折叠说说颜色修改*/
.shuoshuo-content.shuoshuo-folded:after {
	border-radius: 10px;
	background: linear-gradient(180deg, transparent 0%, var(--mycolor) 100%);
}
:root {--mycolor: #e6ddd3;}
html.darkmode {--mycolor: #424242;}
 
/*滚动条修改*/
::-webkit-scrollbar {width: 8px;}
::-webkit-scrollbar-track{
	background-color:#272010;
}
::-webkit-scrollbar-thumb{
	background-color:#6f6558;
	border:none;
}
html.darkmode ::-webkit-scrollbar-track{
	background-color:#282828;
}

/*顶部提示条
/* 提示条样式 */
.glass-notification {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 12px;
    padding: 15px 25px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    z-index: 9999;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    max-width: 80%;
    text-align: center;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 进度条容器 */
.progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.1);
}

/* 进度条 */
.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    transition: width 3s linear;
}

/* 显示动画 */
.glass-notification.show {
    top: 20px;
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* 隐藏动画 */

.glass-notification.hide {
    top: -100px;
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
}

/* 大雪纷飞效果 */
#snowCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/*悼念模式 
html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); } */

Argon 主题设置

请进入 Argon 主题设置-脚本-页尾脚本

<!--回顶图标修改--><script>
$("#fabtn_back_to_top > span > i").removeClass("fa fa-angle-up");
$("#fabtn_back_to_top > span > i").addClass("fa fa-arrow-up");
</script>
 
<!--卡片3D效果脚本--><script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper/vanilla3D/vanilla-tilt.min.js"></script>
<!--判断是否为Safari浏览器--><script>var isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);</script>
 
<!--以下内容每次跳转新页面都执行，pjax额外处理--><script>
window.pjaxLoaded = function () {
    //站点概览点击头像或作者名跳转到关于页
    $("#leftbar_overview_author_image").wrapAll('<a href="/about" /a>');
    $("#leftbar_overview_author_name").wrapAll('<a href="/about" /a>');

    //卡片3D效果
    if (screen.width >= 768 && !isSafari) {
        VanillaTilt.init(document.querySelectorAll("article.post:not(.post-full), .shuoshuo-preview-container"), {
            reverse: true,  // reverse the tilt direction
            max: 8,     // max tilt rotation (degrees)
            startX: 0,      // the starting tilt on the X axis, in degrees.
            startY: 0,      // the starting tilt on the Y axis, in degrees.
            perspective: 1000,   // Transform perspective, the lower the more extreme the tilt gets.
            scale: 1.02,      // 2 = 200%, 1.5 = 150%, etc..
            speed: 600,    // Speed of the enter/exit transition
            transition: false,   // Set a transition on enter/exit.
            axis: "y",    // What axis should be banned. Can be "x", "y", or null
            reset: true,   // If the tilt effect has to be reset on exit.
            easing: "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
            glare: false,  // if it should have a "glare" effect
            "max-glare": 0.8,      // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
            "glare-prerender": false,  // false = VanillaTilt creates the glare elements for you, otherwise
            // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
            "mouse-event-element": null,   // css-selector or link to HTML-element what will be listen mouse events
            gyroscope: true,   // Boolean to enable/disable device orientation detection,
            gyroscopeMinAngleX: -45,    // This is the bottom limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the left border of the element;
            gyroscopeMaxAngleX: 45,     // This is the top limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the right border of the element;
            gyroscopeMinAngleY: -45,    // This is the bottom limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the top border of the element;
            gyroscopeMaxAngleY: 45,     // This is the top limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the bottom border of the element;
        })
    }
}
window.pjaxLoaded();
</script>
 
<!--根据滚动高度改变顶栏透明度--><script>
!function () {
    let toolbar = document.getElementById("navbar-main");
    let $bannerContainer = $("#banner_container");
    let $content = $("#content");
 
    let startTransitionHeight;
    let endTransitionHeight;
    let maxOpacity = 0.65;
 
    startTransitionHeight = $bannerContainer.offset().top - 75;
    endTransitionHeight = $content.offset().top - 75;
 
    $(window).resize(function () {
        startTransitionHeight = $bannerContainer.offset().top - 75;
        endTransitionHeight = $content.offset().top - 75;
    });
 
    function changeToolbarTransparency() {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop < startTransitionHeight) {
            toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), 0)', 'important');
            toolbar.style.setProperty('box-shadow', 'none');
            toolbar.style.setProperty('-webkit-box-shadow', 'none');
            if (argonConfig.toolbar_blur) {
                toolbar.style.setProperty('backdrop-filter', 'blur(0px)');
                toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(0px)');
            }
            toolbar.classList.add("navbar-ontop");
            return;
        }
        if (scrollTop > endTransitionHeight) {
            toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + maxOpacity + ')', 'important');
            toolbar.style.setProperty('box-shadow', '');
            toolbar.style.setProperty('-webkit-box-shadow', '');
            if (argonConfig.toolbar_blur) {
                toolbar.style.setProperty('backdrop-filter', 'blur(16px)');
                toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(16px)');
            }
            toolbar.classList.remove("navbar-ontop");
            return;
        }
        let transparency = (scrollTop - startTransitionHeight) / (endTransitionHeight - startTransitionHeight) * maxOpacity;
        toolbar.style.setProperty('background-color', 'rgba(var(--toolbar-color), ' + transparency, 'important');
        toolbar.style.setProperty('box-shadow', '');
        if (argonConfig.toolbar_blur) {
            toolbar.style.setProperty('backdrop-filter', 'blur(16px)');
            toolbar.style.setProperty('-webkit-backdrop-filter', 'blur(16px)');
        }
        toolbar.classList.remove("navbar-ontop");
    }
    changeToolbarTransparency();
    document.addEventListener("scroll", changeToolbarTransparency, { passive: true });
}();
</script>

如有错误欢迎各位大佬指正

本篇文章标题：Argon美化记录
作者：YuHuan
文章链接：https://blog.317188.xyz/argon/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YuHuan的博客 | 探索数字时间的宝藏角落 | 分享实用资源与技术思考 ！
日常

评论

  1. 孙哥备案系统
    Android Chrome
    日本东京 Amazon数据中心
    2 天前
    2025-12-19 8:21:19

    博主你好，孙备案项目新开张，希望得到更大的支持加入孙备案！提交备案即可得到您的专属网站备案号！希望博主多多支持!https://icp.sgyyds.club 希望博主能在我们网站申请一个备案号放在页脚呀！

发送评论 编辑评论

 
 
 
 
 
 
 
  
   
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
  
上一篇
    
   
欢迎访问我们的网站！