模板:主题-创价旗：修订间差异

来自SOKA CAFE
可视化wikitext
小
Banmad3n
Banmad3n（留言 | 贡献） （优化Skin）
 
第1行： 第1行：
{{#CSS:
<includeonly>
<html>
<style>
/**
* SOKA CAFE - TIMELESS THEME - SC V2.0
* Airmoto / SGI Cultural Hub Skin — Soka Flag Palette (Blue / Yellow / Red)
*/
 
/* --- 1. Imports & Root Variables --- */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700;800&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: #0033A0;
    --mw-accent: #FFC72C;
    --mw-red: #C8102E;
    --mw-link: #0033A0;
    --mw-bg-page: #EFF2F8;
    --mw-bg-card: #FFFFFF;
    --mw-bg-sidebar: #E4EAF6;
    --mw-border: #C7D2E8;
    --mw-radius: 12px;
    --font-heading: 'Shippori Mincho', '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, 51, 160, 0.06);
}
 
/* --- 2. Global Typography & Layout --- */
body {
body {
     background-color: #f8f8e0;
     background-color: var(--mw-bg-page);
     color: #333;
    color: #2a2a2a;
     font-family: sans-serif;
    font-family: var(--font-body);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}
 
#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;
    border-radius: var(--mw-radius);
    border: 1px solid var(--mw-border);
    box-shadow: var(--shadow-subtle);
}
 
/* --- 3. Logo (untouched, no shadow/hover) --- */
#p-logo, .mw-portlet-logo {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 20px 0 !important;
    margin-bottom: 10px;
}
 
/* --- 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(0, 51, 160, 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: 500;
    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: 500;
}
 
.mw-parser-output h1 { border-bottom: 4px solid var(--mw-bg-sidebar); }
.mw-parser-output h2 { border-bottom: 4px solid rgba(228, 234, 246, 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: var(--mw-bg-sidebar);
    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 {
h1.firstHeading {
     font-family: "serif", serif !important;
     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-red);
    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;
}
}


#mw-content-wrapper {
#personal h2,
     background: none;
#personal .header-avatar {
    overflow: visible;
}
 
/* --- 6. Source Code Beautification --- */
code {
     background-color: #eef1f9;
    color: #C8102E;
    padding: 3px 7px;
    border-radius: 6px;
    font-family: var(--font-code);
    font-size: 0.9em;
}
}


#mw-content {
pre {
     background-color: #ffffff;
     background-color: #f7f8fc !important;
     padding: 20px;
    border: 1px solid var(--mw-border) !important;
     border-radius: 8px;
    border-left: 6px solid var(--mw-primary) !important;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     padding: 20px !important;
     margin-bottom: 20px;
     border-radius: var(--mw-radius);
     border: 1px solid #c0c0a8;
     font-family: var(--font-code) !important;
    line-height: 1.6;
     overflow-x: auto;
     color: #333;
}
}


/* --- 7. Sidebar Elements (flat, no dot pattern) --- */
.sidebar-chunk {
.sidebar-chunk {
     background-color: #e6e6c3;
     background-color: var(--mw-bg-sidebar);
    border-radius: var(--mw-radius);
    border: 1px solid rgba(0, 51, 160, 0.08);
    border-top: 3px solid var(--mw-accent);
    margin-bottom: 20px;
     padding: 15px;
     padding: 15px;
    margin-bottom: 18px;
    border-radius: 8px;
    border: 1px solid #a9a98b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
}


h1, h2, h3, h4, h5, h6 {
.sidebar-chunk h2 {
     border-bottom-color: #a9a98b;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 1.2px;
     border: none;
    margin-bottom: 12px;
    color: var(--mw-primary) !important;
}
 
/* --- 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;
    border-bottom: 2px solid var(--mw-accent);
}
 
table.wikitable td {
    padding: 10px;
    border-top: 1px solid #eef1f9;
}
}


a {
a {
     color: #006699;
     color: var(--mw-link);
     text-decoration: none;
     transition: all 0.2s ease;
}
}


a:hover {
a:hover {
     text-decoration: underline;
    color: var(--mw-red);
    color: #004d7a;
     text-decoration: underline dotted;
}
}


a:visited {
a:visited {
     color: #006699;
     color: var(--mw-link);
}
}


table.wikitable {
/* --- 9. Categorization & Footer --- */
     background-color: #ffffff;
#catlinks {
     border: 1px solid #c0c0a8;
     background-color: #f4f6fb;
     border-collapse: collapse;
     border: 1px solid var(--mw-border);
     margin: 1em 0;
     border-radius: var(--mw-radius);
     padding: 15px;
}
}


table.wikitable th,
.mw-footer {
table.wikitable td {
    background-color: var(--mw-bg-sidebar);
     border: 1px solid #c0c0a8;
    padding: 30px;
     padding: 0.5em;
    border-radius: var(--mw-radius) var(--mw-radius) 0 0;
    margin-top: 40px;
     border-top: 4px solid var(--mw-primary);
     box-shadow: inset 0 3px 0 0 var(--mw-accent);
}
}


table.wikitable th {
.mw-footer-container { background: transparent; }
     background-color: #e6e6c3;
 
     text-align: center;
/* --- 10. MOBILE FIXES (≤850px) --- */
@media screen and (max-width: 850px) {
    #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;
    }
 
    .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;
    }
}
}


.mw-footer {
</style>
    background-color: #e6e6c3;
<script>
    padding: 15px;
/**
    margin-top: 20px;
* SOKA CAFE - UI ENHANCEMENTS (v2.0)
    border-radius: 8px;
* Features: Bottom Progress Bar, Code Copy Buttons, Smooth Reveal.
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
*/
     font-size: 0.9em;
 
    color: #555;
(function() {
}
    "use strict";
}}<noinclude>
 
    const injectStyles = () => {
        const style = document.createElement('style');
        style.innerHTML = `
            #reading-progress-container {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 5px;
                background: rgba(0, 51, 160, 0.1);
                backdrop-filter: blur(2px);
                z-index: 9999;
                border-top: 1px solid rgba(0, 51, 160, 0.05);
            }
            #reading-progress-bar {
                height: 100%;
                width: 0%;
                background: var(--mw-primary, #0033A0);
                box-shadow: 0 0 10px var(--mw-accent, #FFC72C);
                transition: width 0.15s ease-out;
            }
 
            .code-copy-btn {
                position: absolute;
                top: 10px;
                right: 10px;
                background: var(--mw-primary, #0033A0);
                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-red, #C8102E);
                transform: scale(1.05);
            }
            pre { position: relative; overflow: visible !important; }
 
            .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;
            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);
        });
    };
 
    document.addEventListener("DOMContentLoaded", () => {
        injectStyles();
        initProgressBar();
        initCopyButtons();
        initScrollReveal();
    });
})();
</script>
</html>
</includeonly><noinclude>{{主题-创价旗}}
==描述==
===来源===
作者：[[User:Banmad3n|Serenelle Banmaden]]
 
===说明===
若想在页面使用该主题，请直接在页面源代码中添加以下代码：
<pre>{{主题-创价旗}}</pre>
[[分类:模板-主题]]
[[分类:模板-主题]]
</noinclude>
</noinclude>

2026年8月8日 (六) 19:21的最新版本

描述

来源

作者：Serenelle Banmaden

说明

若想在页面使用该主题，请直接在页面源代码中添加以下代码： 

{{主题-创价旗}}
取自“https://soka.cafe/index.php?title=模板:主题-创价旗&oldid=3365”