Template:Theme-HJ: Difference between revisions

From HUIJIA FUN
← Older editNewer edit →
VisualWikitext
m Debug
m Refinement
Line 3: Line 3:
<style>
<style>
/**
/**
  * HUIJIA FUN - TIMELESS CONSOLIDATED THEME (v3.1)
  * HUIJIA FUN - TIMELESS CONSOLIDATED THEME (v3.5 EN)
  * Integrated Design: Forest Green / Academic Serif / Engineering Grid
  * Integrated Design: Forest Green / Academic Serif / Engineering Grid
  * Debugged: Pill Search Bar Alignment & Header Layout
  * Updates: Ported CN hierarchical heading decorations, enhanced padding, and font anti-aliasing.
  */
  */


Line 32: Line 32:
     font-family: var(--font-body);
     font-family: var(--font-body);
     line-height: 1.75;
     line-height: 1.75;
    -webkit-font-smoothing: antialiased; /* Ported from CN for crisper EN text */
}
}


Line 41: Line 42:
#mw-content {
#mw-content {
     background-color: var(--mw-bg-card);
     background-color: var(--mw-bg-card);
     padding: 30px 30px;
     padding: 35px 40px; /* Ported from CN for better whitespace */
     border-radius: var(--mw-radius);
     border-radius: var(--mw-radius);
     border: 1px solid var(--mw-border);
     border: 1px solid var(--mw-border);
Line 59: Line 60:


#p-logo img {
#p-logo img {
    /* border: 1px solid var(--mw-border);
    background: #fff;
    padding: 2px; */
     border-radius: 4px;
     border-radius: 4px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.06);
     box-shadow: 0 4px 12px rgba(0,0,0,0.06);
Line 71: Line 69:
}
}


/* --- 4. Fixed Pill Search Bar (Debugged) --- */
/* --- 4. Fixed Pill Search Bar --- */
#p-search {
#p-search {
     margin: 0 20px !important;
     margin: 0 20px !important;
Line 78: Line 76:
}
}


/* Container for the search input and button */
#searchform {
#searchform {
     background: #ffffff !important;
     background: #ffffff !important;
     border: 1px solid var(--mw-border) !important;
     border: 1px solid var(--mw-border) !important;
     border-radius: 30px !important; /* Forces the pill shape */
     border-radius: 30px !important;  
     display: flex !important;
     display: flex !important;
     flex-direction: row !important;
     flex-direction: row !important;
Line 89: Line 86:
     transition: all 0.3s ease;
     transition: all 0.3s ease;
     overflow: hidden;
     overflow: hidden;
     max-width: 350px; /* Prevents the bar from stretching too far */
     max-width: 350px;  
}
}


Line 97: Line 94:
}
}


/* Targets the specific MediaWiki wrapper inside the form */
#simpleSearch {
#simpleSearch {
     background: transparent !important;
     background: transparent !important;
Line 117: Line 113:
}
}


/* The Magnifying Glass / Search Button */
/* --- 5. Headings with "◈" Decoration & Hierarchical Lines --- */
/* A lot of bugs!!!
h1, h2, h3, h4, h5, h6 {
    #searchButton, .searchButton {
     font-family: var(--font-heading) !important;
     background-color: var(--mw-primary) !important;
     font-weight: 800; /* Retained EN Montserrat weight */
     border: none !important;
     letter-spacing: -0.01em;
    border-radius: 50% !important; /* Perfect circle button */
     padding-bottom: 8px;
     color: white !important;
     margin-bottom: 1em;
    width: 28px !important;
     overflow: hidden;  
    height: 28px !important;
     display: block;
    min-width: 28px !important;
    display: flex !important;
     justify-content: center !important;
     align-items: center !important;
     cursor: pointer;
     margin-left: 0px !important;
    transition: background 0.2s ease, transform 0.2s ease;
}
}


#searchButton:hover {
/* Ported hierarchical underlines from CN */
    background-color: var(--mw-accent) !important;
.mw-parser-output h1 { border-bottom: 4px solid #C8D8C8; }
    transform: scale(1.05);
.mw-parser-output h2 { border-bottom: 4px solid rgba(200, 216, 200, 0.9); }
} */


/* --- 5. Headings with "◈" Decoration --- */
.mw-parser-output h3, .mw-parser-output h4, .mw-parser-output h5, .mw-parser-output h6 {
h1, h2, h3, h4, h5, h6 {
    border-bottom: none !important;
     font-family: var(--font-heading);
    position: relative;
     font-weight: 800;
}
     letter-spacing: -0.01em;
 
.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 {
h1.firstHeading {
     font-family: var(--font-heading);
     font-family: var(--font-heading);
     color: var(--mw-primary) !important;
     color: var(--mw-primary) !important;
     font-size: 2em;
     font-size: 2em; /* Retained EN sizing */
     border-bottom: 4px solid var(--mw-bg-sidebar);
     border-bottom: 4px solid var(--mw-bg-sidebar);
     padding-bottom: 8px;
     padding-bottom: 8px;
Line 203: Line 205:


.sidebar-chunk h2 {
.sidebar-chunk h2 {
     font-size: 0.85em;
     font-size: 0.85em; /* Retained EN uppercase styling */
     text-transform: uppercase;
     text-transform: uppercase;
     letter-spacing: 1.2px;
     letter-spacing: 1.2px;
Line 392: Line 394:
})();
})();
</script>
</script>
</html></includeonly><noinclude>{{Theme-HJ}}
</html>
</includeonly><noinclude>{{Theme-HJ}}
==Description==
==Description==
===Origin===
===Origin===

Revision as of 03:07, 30 April 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=104"