Template:Theme-HJ: Difference between revisions

From HUIJIA FUN
← Older editNewer edit →
VisualWikitext
m Beautification
Beautification
Line 2: Line 2:
<html>
<html>
<style>
<style>
/**
* HUIJIA FUN - TIMELESS CONSOLIDATED THEME (v3.0)
* Integrated Design: Forest Green / Academic Serif / Engineering Grid
* Developed for: Etersen Bayara (English Version)
*/
/* --- 1. Imports & Root Variables --- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Lora:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@600;800&display=swap');
: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: 'Montserrat', sans-serif;
    --font-body: 'Lora', serif;
    --font-code: 'JetBrains Mono', monospace;
    --shadow-subtle: 0 10px 30px rgba(0, 0, 0, 0.04);
}
/* --- 2. 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.75;
}
}


#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: 30px 30px;
    border-radius: var(--mw-radius);
    border: 1px solid var(--mw-border);
    box-shadow: var(--shadow-subtle);
    /* Refined Engineering Grid Background */
    background-image: radial-gradient(var(--mw-border) 0.6px, transparent 0.6px);
    background-size: 28px 28px;
}
 
/* --- 3. Avatar & Logo Symmetry Debug --- */
/* Centers the pixel-art avatar vertically and horizontally within the sidebar area */
#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: 1px solid var(--mw-border);
     border-radius: 8px;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    background: #fff;
     margin-bottom: 20px;
    padding: 2px;
    border: 1px solid #A3B1A8;
     box-shadow: 0 4px 12px rgba(0,0,0,0.06);
     background-image: radial-gradient(circle at 0px 0px, #DDD 1px, transparent 2px);
     transition: transform 0.2s ease;
    background-size: 10px 10px;
}
     background-repeat: repeat;
 
#p-logo img:hover {
     transform: translateY(-2px);
}
 
/* --- 4. Modern Pill Search Bar --- */
#p-search {
     margin-right: 25px !important;
}
}


.sidebar-chunk {
#searchform {
     background-color: #C8D8C8;
     display: flex;
     padding: 15px;
    align-items: center;
     margin-bottom: 18px;
     background: white;
     border-radius: 8px;
     border: 1px solid var(--mw-border);
     border: 1px solid #8A9B8A;
     border-radius: 20px; /* Pill Shape */
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     padding: 2px 2px 2px 12px;
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
}


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


h3, h4, h5, h6 {
#searchInput {
     color: #227F52 !important;
     background: transparent !important;
     border-bottom-color: #8A9B8A;
     border: none !important;
    box-shadow: none !important;
    font-family: var(--font-body);
    font-size: 0.9em !important;
    width: 180px !important;
    padding: 5px 0 !important;
}
}


a {
#searchButton, .searchButton {
     color: #008000;
    background-color: var(--mw-primary) !important;
    border: none !important;
    border-radius: 20px !important;
     color: white !important;
    padding: 4px 15px !important;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 0.8em;
    transition: background 0.2s ease;
}
}


a:hover {
#searchButton:hover {
     color: #004D00;
     background-color: var(--mw-accent) !important;
    text-decoration: underline;
}
}


a:visited {
/* --- 5. Headings with "◈" Decoration --- */
     color: #004D00;
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 800;
     letter-spacing: -0.01em;
}
}


table.wikitable {
h1.firstHeading {
     background-color: #FFFFFF;
     font-family: var(--font-heading);
     border: 1px solid #A3B1A8;
    color: var(--mw-primary) !important;
     border-collapse: collapse;
    font-size: 2em;
     margin: 1em 0;
     border-bottom: 4px solid var(--mw-bg-sidebar);
     padding-bottom: 8px;
     margin-bottom: 1em;
}
}


table.wikitable th,
/* The Diamond Prefix */
table.wikitable td {
h1.firstHeading::before {
     border: 1px solid #A3B1A8;
     content: "◈";
     padding: 0.5em;
    color: var(--mw-accent);
     margin-right: 10px;
    font-size: 0.8em;
    vertical-align: middle;
}
}


table.wikitable th {
h2 {
     background-color: #C8D8C8;
     color: var(--mw-primary) !important;
     text-align: center;
    border-bottom: 1px solid var(--mw-border);
    padding-bottom: 5px;
     margin-top: 2em;
}
}


.mw-footer {
/* --- 6. Source Code Beautification --- */
     background-color: #C8D8C8;
code {
     padding: 15px;
     background-color: #f1f4f1;
     margin-top: 20px;
     color: #b33939; /* Deep red contrast for readability */
     border-radius: 8px;
     padding: 3px 7px;
     box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
     border-radius: 6px;
     font-family: var(--font-code);
     font-size: 0.9em;
     font-size: 0.9em;
    color: #555;
}
}


#catlinks {
pre {
     margin-top: 20px;
     background-color: #f9fbf9 !important;
     padding: 10px 15px;
     border: 1px solid var(--mw-border) !important;
     background-color: #C8D8C8;
     border-left: 6px solid var(--mw-primary) !important; /* Signature left-border */
     border: 1px solid #8A9B8A;
     padding: 20px !important;
     border-radius: 8px;
     border-radius: var(--mw-radius);
     font-size: 0.9em;
     font-family: var(--font-code) !important;
    line-height: 1.6;
    overflow-x: auto;
    color: #333;
}
}


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


#catlinks ul li {
.sidebar-chunk h2 {
     display: inline-block;
     font-size: 0.85em;
     margin-right: 10px;
     text-transform: uppercase;
     line-height: 1.5;
     letter-spacing: 1.2px;
    border: none;
    margin-bottom: 12px;
}
}


#catlinks ul li a {
/* --- 8. Wikitables & Interactive Elements --- */
     color: #006400;
table.wikitable {
     text-decoration: none;
     border-radius: var(--mw-radius);
    overflow: hidden; /* Clips corners */
    border: 1px solid var(--mw-border);
    border-collapse: separate;
     border-spacing: 0;
}
}


#catlinks ul li a:hover {
table.wikitable th {
    text-decoration: underline;
    background-color: var(--mw-bg-sidebar);
    color: #004D00;
    color: var(--mw-primary);
    font-family: var(--font-heading);
    padding: 12px;
}
}


div.messagebox {
table.wikitable td {
    margin: 1em 0;
    border: 1px solid #8A9B8A;
    background-color: #E0EBE0;
     padding: 10px;
     padding: 10px;
     border-radius: 5px;
     border-top: 1px solid #f0f0f0;
    font-size: 0.95em;
}
}


input[type="submit"],
a {
input[type="button"],
     color: var(--mw-link);
input[type="reset"],
.mw-ui-button {
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
     color: #FFFFFF;
    background-color: #006400;
    border: 1px solid #004D00;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    text-align: center;
     text-decoration: none;
     text-decoration: none;
     transition: background-color 0.3s ease;
     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;
}
}


input[type="submit"]:hover,
.mw-footer {
input[type="button"]:hover,
     background-color: var(--mw-bg-sidebar);
input[type="reset"]:hover,
    padding: 30px;
.mw-ui-button:hover {
     border-radius: var(--mw-radius) var(--mw-radius) 0 0;
     background-color: #004D00;
    margin-top: 40px;
     border-color: #003300;
     border-top: 4px solid var(--mw-primary);
     text-decoration: none;
}
}
</style>
</style>

Revision as of 00:06, 31 March 2026

Description

Origin

Author: PlurimodSU

Note

To use this theme on a page, simply add the following code directly to the page's source code: 

{{Theme-HJ}}
Retrieved from "https://en.huijia.fun/index.php?title=Template:Theme-HJ&oldid=73"