模板:主题-汇佳：修订间差异

来自SOKA CAFE
可视化wikitext
Banmad3n
Banmad3n（留言 | 贡献） （Debug）
 
（未显示同一用户的5个中间版本）
第1行： 第1行：
{{#CSS:
<includeonly>
<html>
<style>
/**
* HUIJIA FUN - TIMELESS CONSOLIDATED THEME (v3.4)
* Fix: Corrected @import syntax for LXGW WenKai
*/
 
/* --- 1. Imports --- */
@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');
 
/* --- 2. Root Variables --- */
: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;
    /* 这里的字体名称必须与 CDN 样式表内的定义的名称一致 */
    --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);
}
 
/* --- 3. Global Typography & Layout --- */
body {
body {
     background-color: #e0ebe0;
     background-color: var(--mw-bg-page);
     color: #333;
     color: #2c3e50;
     font-family: sans-serif;
     font-family: var(--font-body);
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
}
}


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


#mw-content {
#mw-content {
     background-color: #ffffff;
     background-color: var(--mw-bg-card);
     padding: 20px;
    padding: 35px 40px;
     border-radius: 8px;
    border-radius: var(--mw-radius);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--mw-border);
     margin-bottom: 20px;
    box-shadow: var(--shadow-subtle);
     border: 1px solid #a3b1a8;
    background-image: radial-gradient(var(--mw-border) 0px, transparent 1px);
    background-size: 20px 20px;
}
 
/* --- 4. 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);
}
 
/* --- 5. 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;
}
 
/* --- 6. Headings with "◈" Decoration --- */
.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-family: var(--font-heading) !important;
    font-weight: 400;
    letter-spacing: 0.05em;
    padding-bottom: 8px;
    margin-bottom: 1em;
    overflow: hidden;  
     display: block;
}
 
.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: 1em;
    vertical-align: middle;
}
}


.sidebar-chunk {
h2 {
     background-color: #c8d8c8;
     color: var(--mw-primary) !important;
     padding: 15px;
     border-bottom: 1px solid var(--mw-border);
     margin-bottom: 18px;
     padding-bottom: 5px;
     border-radius: 8px;
     margin-top: 2em;
    border: 1px solid #8a9b8a;
     font-size: 1.8em;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
}


h1, h2, h3, h4, h5, h6 {
/* --- 7. Source Code & Technical Elements --- */
     color: #006400;
code {
     border-bottom-color: #8a9b8a;
    background-color: #f1f4f1;
     color: #b33939;
    padding: 3px 7px;
     border-radius: 6px;
    font-family: var(--font-code);
    font-size: 0.9em;
}
}


a {
pre {
     color: #008000;
     background-color: #f9fbf9 !important;
     text-decoration: none;
    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;
}
}


a:hover {
/* --- 8. Sidebar Elements --- */
     text-decoration: underline;
.sidebar-chunk {
     color: #004d00;
    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;
}
}


a:visited {
.sidebar-chunk h2 {
     color: #556b2f;
    font-size: 1.1em;
    font-family: var(--font-heading);
    border: none;
     margin-bottom: 12px;
}
}


/* --- 9. Wikitables & Interactive Elements --- */
table.wikitable {
table.wikitable {
     background-color: #ffffff;
     border-radius: var(--mw-radius);
     border: 1px solid #a3b1a8;
    overflow: hidden;
     border-collapse: collapse;
     border: 1px solid var(--mw-border);
     margin: 1em 0;
     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;
     font-size: 1.1em;
}
}


table.wikitable th,
table.wikitable td {
table.wikitable td {
     border: 1px solid #a3b1a8;
    padding: 10px;
    padding: 0.5em;
     border-top: 1px solid #f0f0f0;
}
}


table.wikitable th {
a {
     background-color: #c8d8c8;
    color: var(--mw-link);
     text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
}
 
a:hover {
     color: var(--mw-primary);
     text-decoration: underline dotted;
}
}


.mw-footer {
/* --- 10. Categorization & Footer --- */
     background-color: #c8d8c8;
#catlinks {
     background-color: #f4f8f4;
    border: 1px solid var(--mw-border);
    border-radius: var(--mw-radius);
     padding: 15px;
     padding: 15px;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    font-size: 0.9em;
    color: #555;
}
}


#wpTextbox1,
.mw-footer {
.mw-searchInput,
     background-color: var(--mw-bg-sidebar);
input[type="text"],
    padding: 30px;
input[type="password"],
     border-radius: var(--mw-radius) var(--mw-radius) 0 0;
input[type="email"],
     margin-top: 40px;
input[type="search"],
     border-top: 4px solid var(--mw-primary);
mw-content {
     background-color: #ffffff;
     background-image: radial-gradient(circle at 4px 4px, #ccc 1px, transparent 1px);
     background-size: 10px 10px;
     background-repeat: repeat;
}
}
}}<noinclude>
</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>{{主题-汇佳}}
==测试=={{信息}}
===测试2===
====测试3====
=====测试4=====
======测试5======
==测试==
===测试2===
====测试3====
=====测试4=====
======测试5======
[[分类:模板-主题]]
[[分类:模板-主题]]
</noinclude>
</noinclude>

2026年3月31日 (二) 17:26的最新版本

测试

SOKA CAFE

测试2

测试3

测试4
测试5

测试

测试2

测试3

测试4
测试5
取自“https://soka.cafe/index.php?title=模板:主题-汇佳&oldid=3278”