Template:Theme-HJ: Difference between revisions
From HUIJIA FUN
PlurimodSU (talk | contribs) Beautification |
PlurimodSU (talk | contribs) m Beautification |
||
| Line 3: | Line 3: | ||
<style> | <style> | ||
/** | /** | ||
* HUIJIA FUN - TIMELESS CONSOLIDATED THEME (v3. | * HUIJIA FUN - TIMELESS CONSOLIDATED THEME (v3.1) | ||
* Integrated Design: Forest Green / Academic Serif / Engineering Grid | * Integrated Design: Forest Green / Academic Serif / Engineering Grid | ||
* | * Debugged: Pill Search Bar Alignment & Header Layout | ||
*/ | */ | ||
| Line 45: | Line 45: | ||
border: 1px solid var(--mw-border); | border: 1px solid var(--mw-border); | ||
box-shadow: var(--shadow-subtle); | box-shadow: var(--shadow-subtle); | ||
background-image: radial-gradient(var(--mw-border) 0.6px, transparent 0.6px); | background-image: radial-gradient(var(--mw-border) 0.6px, transparent 0.6px); | ||
background-size: 28px 28px; | background-size: 28px 28px; | ||
} | } | ||
/* --- 3. Avatar & Logo Symmetry | /* --- 3. Avatar & Logo Symmetry --- */ | ||
#p-logo, .mw-portlet-logo { | #p-logo, .mw-portlet-logo { | ||
display: flex !important; | display: flex !important; | ||
| Line 73: | Line 71: | ||
} | } | ||
/* --- 4. | /* --- 4. Fixed Pill Search Bar (Debugged) --- */ | ||
#p-search { | #p-search { | ||
margin | margin: 0 20px !important; | ||
display: flex; | |||
align-items: center; | |||
} | } | ||
/* Container for the search input and button */ | |||
#searchform { | #searchform { | ||
background: #ffffff !important; | |||
border: 1px solid var(--mw-border) !important; | |||
background: | border-radius: 30px !important; /* Forces the pill shape */ | ||
border: 1px solid var(--mw-border); | display: flex !important; | ||
border-radius: | flex-direction: row !important; | ||
padding: 2px 2px | align-items: center !important; | ||
transition: | padding: 2px 4px 2px 15px !important; | ||
transition: all 0.3s ease; | |||
overflow: hidden; | |||
max-width: 350px; /* Prevents the bar from stretching too far */ | |||
} | } | ||
#searchform:focus-within { | #searchform:focus-within { | ||
border-color: var(--mw-primary); | border-color: var(--mw-primary) !important; | ||
box-shadow: 0 0 0 4px rgba(2, 95, 50, 0.1); | box-shadow: 0 0 0 4px rgba(2, 95, 50, 0.1) !important; | ||
} | |||
/* Targets the specific MediaWiki wrapper inside the form */ | |||
#simpleSearch { | |||
background: transparent !important; | |||
border: none !important; | |||
width: 100% !important; | |||
display: flex !important; | |||
align-items: center !important; | |||
} | } | ||
| Line 99: | Line 112: | ||
font-family: var(--font-body); | font-family: var(--font-body); | ||
font-size: 0.9em !important; | font-size: 0.9em !important; | ||
padding: 8px 0 !important; | |||
color: #333 !important; | |||
width: 100% !important; | |||
} | } | ||
#searchButton, .searchButton { | /* The Magnifying Glass / Search Button */ | ||
/* A lot of bugs!!! | |||
#searchButton, .searchButton { | |||
background-color: var(--mw-primary) !important; | background-color: var(--mw-primary) !important; | ||
border: none !important; | border: none !important; | ||
border-radius: | border-radius: 50% !important; /* Perfect circle button */ | ||
color: white !important; | color: white !important; | ||
width: 28px !important; | |||
height: 28px !important; | |||
min-width: 28px !important; | |||
display: flex !important; | |||
justify-content: center !important; | |||
align-items: center !important; | |||
cursor: pointer; | cursor: pointer; | ||
margin-left: 0px !important; | |||
transition: background 0.2s ease, transform 0.2s ease; | |||
} | } | ||
#searchButton:hover { | #searchButton:hover { | ||
background-color: var(--mw-accent) !important; | background-color: var(--mw-accent) !important; | ||
} | transform: scale(1.05); | ||
} */ | |||
/* --- 5. Headings with "◈" Decoration --- */ | /* --- 5. Headings with "◈" Decoration --- */ | ||
| Line 127: | Line 148: | ||
h1.firstHeading { | h1.firstHeading { | ||
color: var(--mw-primary) !important; | color: var(--mw-primary) !important; | ||
font-size: 2em; | font-size: 2em; | ||
| Line 135: | Line 155: | ||
} | } | ||
h1.firstHeading::before { | h1.firstHeading::before { | ||
content: "◈"; | content: "◈"; | ||
color: var(--mw-accent); | color: var(--mw-accent); | ||
margin-right: | margin-right: 12px; | ||
font-size: 0.8em; | font-size: 0.8em; | ||
vertical-align: middle; | vertical-align: middle; | ||
| Line 154: | Line 173: | ||
code { | code { | ||
background-color: #f1f4f1; | background-color: #f1f4f1; | ||
color: #b33939; | color: #b33939; | ||
padding: 3px 7px; | padding: 3px 7px; | ||
border-radius: 6px; | border-radius: 6px; | ||
| Line 164: | Line 183: | ||
background-color: #f9fbf9 !important; | background-color: #f9fbf9 !important; | ||
border: 1px solid var(--mw-border) !important; | border: 1px solid var(--mw-border) !important; | ||
border-left: 6px solid var(--mw-primary) !important; | border-left: 6px solid var(--mw-primary) !important; | ||
padding: 20px !important; | padding: 20px !important; | ||
border-radius: var(--mw-radius); | border-radius: var(--mw-radius); | ||
| Line 193: | Line 212: | ||
table.wikitable { | table.wikitable { | ||
border-radius: var(--mw-radius); | border-radius: var(--mw-radius); | ||
overflow: hidden; | overflow: hidden; | ||
border: 1px solid var(--mw-border); | border: 1px solid var(--mw-border); | ||
border-collapse: separate; | border-collapse: separate; | ||
Revision as of 00:15, 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}}
