查看“模板:主题-汇佳”的源代码

<includeonly>
<html>
<style>
/* --- 1. Imports & Root Variables --- */
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&family=Noto+Serif+SC:wght@600;900&family=JetBrains+Mono:wght@400;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.1.0/style.css');

:root {
    --mw-primary: #025F32;
    --mw-accent: #227F52;
    --mw-link: #008000;
    --mw-bg-page: #E0EBE0;
    --mw-bg-card: #FFFFFF;
    --mw-bg-sidebar: #C8D8C8;
    --mw-border: #A3B1A8;
    --mw-radius: 12px;
    --font-heading: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
    --font-body: 'LXGW WenKai Screen', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-code: 'JetBrains Mono', monospace;
    --shadow-subtle: 0 10px 30px rgba(0, 0, 0, 0.04);
}

/* --- 2. Global Typography & Layout --- */
body {
    background-color: var(--mw-bg-page);
    color: #2c3e50;
    font-family: var(--font-body);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased; /* Ported from CN for crisper EN text */
}

#mw-content-wrapper {
    background: transparent;
    padding-top: 0px;
    box-shadow: 0 0px 0px 0px transparent;
}

#mw-content {
    background-color: var(--mw-bg-card);
    padding: 25px 30px; /* Ported from CN for better whitespace */
    border-radius: var(--mw-radius);
    border: 1px solid var(--mw-border);
    box-shadow: var(--shadow-subtle);
    background-image: radial-gradient(var(--mw-border) 0px, transparent 1px);
    background-size: 20px 20px;
}

/* --- 3. Avatar & Logo Symmetry --- */
#p-logo, .mw-portlet-logo {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 20px 0 !important;
    margin-bottom: 10px;
}

#p-logo img {
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: transform 0.2s ease;
}

#p-logo img:hover {
    transform: translateY(-2px);
}

/* --- 4. Fixed Pill Search Bar --- */
#p-search {
    margin: 0 20px !important;
    display: flex;
    align-items: center;
}

#searchform {
    background: #ffffff !important;
    border: 1px solid var(--mw-border) !important;
    border-radius: 30px !important; 
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 2px 4px 2px 15px !important;
    transition: all 0.3s ease;
    overflow: hidden;
    max-width: 350px; 
}

#searchform:focus-within {
    border-color: var(--mw-primary) !important;
    box-shadow: 0 0 0 4px rgba(2, 95, 50, 0.1) !important;
}

#simpleSearch {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

#searchInput {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-family: var(--font-body);
    font-size: 0.9em !important;
    padding: 8px 0 !important;
    color: #333 !important;
    width: 100% !important;
}

/* --- 5. Headings with "◈" Decoration & Hierarchical Lines --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
    font-weight: 400; /* Retained EN Montserrat weight */
    letter-spacing: -0.01em;
    padding-bottom: 8px;
    margin-bottom: 1em;
    overflow: hidden; 
    display: block;
}

.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3, .mw-parser-output h4, .mw-parser-output h5, .mw-parser-output h6 {
    font-weight: 400;
}

/* Ported hierarchical underlines from CN */
.mw-parser-output h1 { border-bottom: 4px solid #C8D8C8; }
.mw-parser-output h2 { border-bottom: 4px solid rgba(200, 216, 200, 0.9); }

.mw-parser-output h3, .mw-parser-output h4, .mw-parser-output h5, .mw-parser-output h6 {
    border-bottom: none !important;
    position: relative;
}

.mw-parser-output h3::after, .mw-parser-output h4::after, .mw-parser-output h5::after, .mw-parser-output h6::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background-color: #C8D8C8;
    border-radius: 2px;
}

.mw-parser-output h3::after { width: 80%; opacity: 1; }
.mw-parser-output h4::after { width: 60%; opacity: 0.8; }
.mw-parser-output h5::after { width: 40%; opacity: 0.6; }
.mw-parser-output h6::after { width: 20%; opacity: 0.4; }

h1.firstHeading {
    font-family: var(--font-heading);
    color: var(--mw-primary) !important;
    font-size: 2.4em;
    border-bottom: 4px solid var(--mw-bg-sidebar);
    padding-bottom: 8px;
    margin-bottom: 1em;
}

h1.firstHeading::before {
    content: "◈";
    color: var(--mw-accent);
    margin-right: 12px;
    font-size: 0.8em;
    vertical-align: middle;
}

h2 {
    color: var(--mw-primary) !important;
    border-bottom: 1px solid var(--mw-border);
    padding-bottom: 5px;
    margin-top: 2em;
}

#personal h2,
#personal .header-avatar {
    overflow: visible;
}

/* --- 6. Source Code Beautification --- */
code {
    background-color: #f1f4f1;
    color: #b33939;
    padding: 3px 7px;
    border-radius: 6px;
    font-family: var(--font-code);
    font-size: 0.9em;
}

pre {
    background-color: #f9fbf9 !important;
    border: 1px solid var(--mw-border) !important;
    border-left: 6px solid var(--mw-primary) !important;
    padding: 20px !important;
    border-radius: var(--mw-radius);
    font-family: var(--font-code) !important;
    line-height: 1.6;
    overflow-x: auto;
    color: #333;
}

/* --- 7. Sidebar Elements --- */
.sidebar-chunk {
    background-color: var(--mw-bg-sidebar);
    border-radius: var(--mw-radius);
    border: 1px solid rgba(0,0,0,0.05);
    margin-bottom: 20px;
    padding: 15px;
}

.sidebar-chunk h2 {
    font-size: 0.85em; /* Retained EN uppercase styling */
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border: none;
    margin-bottom: 12px;
}

/* --- 8. Wikitables & Interactive Elements --- */
table.wikitable {
    border-radius: var(--mw-radius);
    overflow: hidden;
    border: 1px solid var(--mw-border);
    border-collapse: separate;
    border-spacing: 0;
}

table.wikitable th {
    background-color: var(--mw-bg-sidebar);
    color: var(--mw-primary);
    font-family: var(--font-heading);
    padding: 12px;
}

table.wikitable td {
    padding: 10px;
    border-top: 1px solid #f0f0f0;
}

a {
    color: var(--mw-link);
    transition: all 0.2s ease;
}

a:hover {
    color: var(--mw-primary);
    text-decoration: underline dotted;
}

/* --- 9. Categorization & Footer --- */
#catlinks {
    background-color: #f4f8f4;
    border: 1px solid var(--mw-border);
    border-radius: var(--mw-radius);
    padding: 15px;
}

.mw-footer {
    background-color: var(--mw-bg-sidebar);
    padding: 30px;
    border-radius: var(--mw-radius) var(--mw-radius) 0 0;
    margin-top: 40px;
    border-top: 4px solid var(--mw-primary);
}

.mw-footer-container { background: transparent; }

/* --- 10. MOBILE FIXES (≤850px) --- */
@media screen and (max-width: 850px) {
    /* Restore Timeless mobile nav (in case global rules interfere) */
    #mw-mf-page-left, .dropdown, .dropdown-active,
    #mw-site-navigation, #mw-related-navigation,
    #site-tools, #personal {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .dropdown .mw-portlet-body,
    .dropdown.dropdown-active .mw-portlet-body {
        display: block !important;
        height: auto !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        background-color: var(--mw-bg-card) !important;
        border: 1px solid var(--mw-border) !important;
        border-radius: var(--mw-radius) !important;
        box-shadow: var(--shadow-subtle) !important;
        z-index: 9999 !important;
        position: relative !important;
    }

    .dropdown-toggle, #ca-more, .mw-ui-icon {
        position: relative !important;
        z-index: 9999 !important;
    }

    /* Hide the empty green sidebar/portlet shells */
    .sidebar-chunk:empty,
    .mw-portlet:empty,
    .mw-portlet:not(:has(li)):not(:has(a)) {
        display: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: none !important;
    }

    #mw-content-block .sidebar-chunk {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

    #mw-content-block {
        background: transparent !important;
    }
}

</style>
<script>
/**
 * HUIJIA FUN - UI ENHANCEMENTS (v4.1)
 * Fix: Moved Reading Progress Bar to bottom to prevent header overlap.
 * Features: Bottom Progress Bar, Code Copy Buttons, Smooth Reveal.
 */

(function() {
    "use strict";

    const injectStyles = () => {
        const style = document.createElement('style');
        style.innerHTML = `
            /* Reading Progress Bar - Moved to Bottom */
            #reading-progress-container {
                position: fixed;
                bottom: 0; /* Changed from top: 0 */
                left: 0;
                width: 100%;
                height: 5px;
                background: rgba(255, 255, 255, 0.2);
                backdrop-filter: blur(2px);
                z-index: 9999;
                border-top: 1px solid rgba(0,0,0,0.05);
            }
            #reading-progress-bar {
                height: 100%;
                width: 0%;
                background: var(--mw-primary, #025F32);
                box-shadow: 0 0 10px var(--mw-accent, #227F52);
                transition: width 0.15s ease-out;
            }

            /* Code Block Copy Button Fix */
            .code-copy-btn {
                position: absolute;
                top: 10px;
                right: 10px;
                background: var(--mw-primary, #025F32);
                color: white;
                border: none;
                border-radius: 6px;
                padding: 5px 10px;
                font-size: 11px;
                font-family: var(--font-heading);
                font-weight: bold;
                cursor: pointer;
                opacity: 0;
                transition: all 0.2s ease;
                z-index: 50;
            }
            pre:hover .code-copy-btn {
                opacity: 1;
            }
            .code-copy-btn:hover {
                background: var(--mw-accent, #227F52);
                transform: scale(1.05);
            }
            pre { position: relative; overflow: visible !important; }

            /* Entrance Animations */
            .reveal-on-scroll {
                opacity: 0;
                transform: translateY(15px);
                transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            }
            .reveal-on-scroll.is-visible {
                opacity: 1;
                transform: translateY(0);
            }
        `;
        document.head.appendChild(style);
    };

    const initProgressBar = () => {
        const container = document.createElement('div');
        container.id = 'reading-progress-container';
        const bar = document.createElement('div');
        bar.id = 'reading-progress-bar';
        container.appendChild(bar);
        document.body.appendChild(container);

        window.addEventListener('scroll', () => {
            const winScroll = window.pageYOffset || document.documentElement.scrollTop;
            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            const scrolled = (winScroll / height) * 100;
            bar.style.width = scrolled + "%";
        });
    };

    const initCopyButtons = () => {
        const codeBlocks = document.querySelectorAll('pre');
        codeBlocks.forEach((block) => {
            if (block.querySelector('.code-copy-btn')) return; // Prevent duplicates
            const btn = document.createElement('button');
            btn.className = 'code-copy-btn';
            btn.innerText = 'COPY';
            
            btn.addEventListener('click', () => {
                const text = block.innerText.replace('COPY', '').trim();
                navigator.clipboard.writeText(text).then(() => {
                    btn.innerText = 'COPIED!';
                    setTimeout(() => btn.innerText = 'COPY', 2000);
                });
            });
            block.appendChild(btn);
        });
    };

    const initScrollReveal = () => {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('is-visible');
                }
            });
        }, { threshold: 0.05 });

        const items = document.querySelectorAll('#mw-content h2, #mw-content h3, .thumbinner, table.wikitable');
        items.forEach(item => {
            item.classList.add('reveal-on-scroll');
            observer.observe(item);
        });
    };

    // Execution
    document.addEventListener("DOMContentLoaded", () => {
        injectStyles();
        initProgressBar();
        initCopyButtons();
        initScrollReveal();
    });
})();
</script>
</html>
</includeonly><noinclude>{{主题-汇佳}}
==描述==
===来源===
作者：[[User:Banmad3n|Serenelle Banmaden]]

===说明===
若想在页面使用该主题，请直接在页面源代码中添加以下代码：
<pre>{{主题-汇佳}}</pre>

{{信息}}
==测试==
===子标题3===
====子标题4====
=====子标题5=====
======子标题6======

==测试2==
===子标题3===
====子标题4====
=====子标题5=====
======子标题6======
[[分类:模板-主题]]
</noinclude>