Jump to content

MediaWiki:Common.css

From တႆးၽီးတီးယႃး
Revision as of 09:30, 13 October 2026 by Khurleng (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* ==================================================
   TAIPEDIA — COMPLETE MEDIAWIKI STYLESHEET
   Version 1.0

   Includes:
   - Custom Shan.ttf font
   - Article content typography
   - Wikipedia-style homepage
   - Featured articles
   - Latest articles
   - Did You Know
   - Explore Topics
   - Library category cards
   - Create Article form
   - Responsive mobile layout
   ================================================== */


/* ==================================================
   1. CUSTOM SHAN FONT
   ================================================== */

@font-face {
    font-family: "TaipediaShan";
    src: url("/fonts/Shan.ttf?v=20")
         format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ==================================================
   2. ARTICLE TYPOGRAPHY
   ================================================== */

.mw-parser-output {
    font-family:
        "TaipediaShan",
        "Noto Sans Myanmar",
        sans-serif !important;

    font-size: 17px;
    line-height: 1.9;
    overflow-wrap: break-word;
}

.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output blockquote,
.mw-parser-output td,
.mw-parser-output th {
    font-family:
        "TaipediaShan",
        "Noto Sans Myanmar",
        sans-serif !important;

    line-height: 1.9;
}

/* Headings inside article content */
.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:
        "TaipediaShan",
        "Noto Sans Myanmar",
        sans-serif !important;

    line-height: 1.7;
}

/* Preserve programming code fonts */
.mw-parser-output pre,
.mw-parser-output code,
.mw-parser-output .mw-code {
    font-family: monospace !important;
}


/* ==================================================
   3. SHARED HOMEPAGE CONTAINER
   ================================================== */

.mw-parser-output .library-home,
.mw-parser-output .tai-home {
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Shan font for homepage content */
.mw-parser-output .library-home,
.mw-parser-output .library-home *,
.mw-parser-output .tai-home,
.mw-parser-output .tai-home * {
    font-family:
        "TaipediaShan",
        "Noto Sans Myanmar",
        sans-serif !important;
}


/* ==================================================
   4. WELCOME HERO BANNER
   ================================================== */

.mw-parser-output .library-hero,
.mw-parser-output .tai-welcome {
    background: linear-gradient(
        135deg,
        #142d4e 0%,
        #2459a6 100%
    );

    color: #ffffff;
    padding: 50px 30px;
    text-align: center;
    border-radius: 18px;
    margin-bottom: 30px;
}

.mw-parser-output .library-hero h1,
.mw-parser-output .tai-welcome h1 {
    color: #ffffff;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.7;
    border: 0;
    padding: 0;
    margin: 0 0 12px;
}

.mw-parser-output .library-hero p,
.mw-parser-output .tai-welcome p {
    color: #f0f5ff;
    font-size: 16px;
    line-height: 1.9;
    margin: 5px 0;
}


/* ==================================================
   5. WIKIPEDIA-STYLE TWO-COLUMN LAYOUT
   ================================================== */

.mw-parser-output .tai-columns {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
    align-items: stretch;
    margin: 25px 0 35px;
}

/* Article panels */
.mw-parser-output .tai-panel {
    background: #ffffff;
    color: #202b3a;
    border: 1px solid #dce3ec;
    border-radius: 14px;
    padding: 22px;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

.mw-parser-output .tai-panel h2 {
    font-size: 21px;
    font-weight: 400;
    line-height: 1.8;

    margin: -22px -22px 20px;
    padding: 14px 20px;

    border-bottom: 1px solid #dce3ec;
    border-radius: 13px 13px 0 0;
}

.mw-parser-output .tai-panel h3 {
    color: #183153;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.8;
    margin: 12px 0;
}

.mw-parser-output .tai-panel p,
.mw-parser-output .tai-panel li {
    font-size: 15px;
    line-height: 1.9;
}

.mw-parser-output .tai-panel ul {
    margin-top: 12px;
}

.mw-parser-output .tai-panel li {
    margin-bottom: 10px;
}

.mw-parser-output .tai-panel a {
    color: #2459a6;
    text-decoration: none;
}

.mw-parser-output .tai-panel a:hover {
    text-decoration: underline;
}


/* ==================================================
   6. FEATURED ARTICLE
   ================================================== */

.mw-parser-output .tai-featured {
    border-color: #badcc5;
}

.mw-parser-output .tai-featured h2 {
    background: #e8f5ec;
    color: #21633c;
}


/* ==================================================
   7. LATEST ARTICLES PANEL
   ================================================== */

.mw-parser-output .tai-recent {
    border-color: #c6d9f2;
}

.mw-parser-output .tai-recent h2 {
    background: #eaf2ff;
    color: #2459a6;
}


/* ==================================================
   8. DID YOU KNOW PANEL
   ================================================== */

.mw-parser-output .tai-facts {
    border-color: #ead8a3;
}

.mw-parser-output .tai-facts h2 {
    background: #fff5d9;
    color: #795500;
}


/* ==================================================
   9. EXPLORE TOPICS PANEL
   ================================================== */

.mw-parser-output .tai-topics {
    border-color: #d6c9f2;
}

.mw-parser-output .tai-topics h2 {
    background: #f1ebff;
    color: #63418b;
}


/* ==================================================
   10. STANDALONE LATEST ARTICLES SECTION
   ================================================== */

.mw-parser-output .taipedia-latest {
    background: #ffffff;
    border: 1px solid #dbe4ef;
    border-radius: 16px;
    padding: 28px;
    margin: 30px 0;
    box-shadow: 0 3px 12px rgba(0,0,0,0.04);
}

.mw-parser-output .taipedia-latest h2 {
    color: #183153;
    font-size: 24px;
    font-weight: 400;

    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 12px;
    margin: 0 0 16px;
}

.mw-parser-output .taipedia-latest p {
    font-size: 15px;
    color: #64748b;
    line-height: 1.9;
}

.mw-parser-output .taipedia-latest li {
    padding: 10px 0;
    border-bottom: 1px solid #edf2f7;
    line-height: 1.9;
}

.mw-parser-output .taipedia-latest li:last-child {
    border-bottom: 0;
}

.mw-parser-output .taipedia-latest a {
    color: #2459a6;
    text-decoration: none;
}

.mw-parser-output .taipedia-latest a:hover {
    text-decoration: underline;
}


/* ==================================================
   11. OPTIONAL LIBRARY CATEGORY GRID
   ================================================== */

.mw-parser-output .library-grid {
    display: grid !important;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
    align-items: stretch;
    margin: 25px 0 40px;
}

.mw-parser-output .library-home > h2 {
    color: #183153;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.7;

    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 12px;
    margin: 30px 0 25px;
}


/* ==================================================
   12. LIBRARY CATEGORY CARDS
   ================================================== */

.mw-parser-output .library-card {
    display: flex;
    flex-direction: column;

    background: #ffffff;
    color: #183153;

    border: 1px solid #dbe4ef;
    border-radius: 16px;

    padding: 24px;
    min-width: 0;
    box-sizing: border-box;

    box-shadow:
        0 4px 15px rgba(0,0,0,0.06);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.mw-parser-output .library-card:hover {
    transform: translateY(-5px);
    border-color: #2563eb;

    box-shadow:
        0 12px 28px rgba(0,0,0,0.12);
}

/* Card icon */
.mw-parser-output .library-icon {
    font-size: 38px;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* Category number */
.mw-parser-output .library-number {
    color: #2563eb;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

/* Card title */
.mw-parser-output .library-card h3 {
    color: #183153;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.8;

    margin: 8px 0 12px;
    padding: 0;
    border: 0;
    overflow-wrap: break-word;
}

/* Card description */
.mw-parser-output .library-card p {
    color: #64748b;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.9;

    margin: 0 0 20px;
    flex-grow: 1;
}

/* Card links */
.mw-parser-output .library-card a {
    display: inline-block;
    color: #2563eb;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
}

.mw-parser-output .library-card a:hover {
    color: #1e40af;
    text-decoration: underline;
}


/* ==================================================
   13. CATEGORY PAGE ARTICLE LIST
   ================================================== */

.mw-category,
.mw-category-group,
.mw-category-generated,
.mw-category a,
.mw-category-group a {
    font-family:
        "TaipediaShan",
        "Noto Sans Myanmar",
        sans-serif !important;

    line-height: 1.9;
}


/* ==================================================
   14. CREATE ARTICLE FORM
   ================================================== */

.mw-parser-output .taipedia-create-box {
    margin: 30px 0;
    padding: 32px 24px;

    text-align: center;
    background: #f0f6ff;
    border: 1px solid #dbeafe;
    border-radius: 18px;

    box-sizing: border-box;
}

.mw-parser-output .taipedia-create-box h2 {
    color: #173a70;
    font-size: 25px;
    font-weight: 400;
    border: 0;
    margin: 0 0 12px;
}

.mw-parser-output .taipedia-create-box p {
    color: #64748b;
    font-size: 15px;
    line-height: 1.8;
}

/* Article title input */
.taipedia-create-box input[type="text"],
.taipedia-create-box .mw-inputbox-input {
    width: 100%;
    max-width: 400px;

    padding: 12px;
    box-sizing: border-box;

    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;

    font-size: 15px;
}

/* Create Article button */
.taipedia-create-box input[type="submit"],
.taipedia-create-box button {
    background: #2459a6;
    color: #ffffff;

    border: 0;
    border-radius: 8px;

    padding: 12px 22px;
    margin: 8px;

    cursor: pointer;
    font-size: 15px;
    font-weight: 600;

    transition: background 0.2s ease;
}

.taipedia-create-box input[type="submit"]:hover,
.taipedia-create-box button:hover {
    background: #173a70;
}

.taipedia-create-note {
    font-size: 13px;
    color: #64748b;
    margin-top: 18px;
}


/* ==================================================
   15. CREATE ARTICLE VISIBILITY
   ================================================== */

/* Hide creation form for visitors */
.mw-parser-output .taipedia-create-box {
    display: none;
}

/*
   Show creation form for logged-in users.
   Requires the mw-user-loggedin class on body.
*/

body.mw-user-loggedin
.mw-parser-output .taipedia-create-box {
    display: block !important;
}


/* ==================================================
   16. SHAN FONT FOR CONTENT PANELS
   ================================================== */

.mw-parser-output .tai-panel,
.mw-parser-output .tai-panel *,
.mw-parser-output .taipedia-latest,
.mw-parser-output .taipedia-latest *,
.mw-parser-output .library-card,
.mw-parser-output .library-card * {
    font-family:
        "TaipediaShan",
        "Noto Sans Myanmar",
        sans-serif !important;
}


/* ==================================================
   17. TABLET RESPONSIVE
   ================================================== */

@media (max-width: 900px) {

    .mw-parser-output .library-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .mw-parser-output .library-card {
        padding: 20px;
    }

    .mw-parser-output .library-hero,
    .mw-parser-output .tai-welcome {
        padding: 40px 20px;
    }

    .mw-parser-output .library-hero h1,
    .mw-parser-output .tai-welcome h1 {
        font-size: 30px;
    }

    .mw-parser-output .tai-columns {
        gap: 16px;
    }
}


/* ==================================================
   18. MOBILE RESPONSIVE
   ================================================== */

@media (max-width: 700px) {

    .mw-parser-output .tai-columns {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .mw-parser-output .tai-panel {
        padding: 18px;
    }

    .mw-parser-output .tai-panel h2 {
        margin: -18px -18px 18px;
        padding: 12px 16px;
        font-size: 19px;
    }

    .mw-parser-output .library-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .mw-parser-output .library-card {
        padding: 20px;
        border-radius: 14px;
    }

    .mw-parser-output .library-card h3 {
        font-size: 19px;
    }

    .mw-parser-output .library-card p {
        font-size: 14px;
    }

    .mw-parser-output .library-hero,
    .mw-parser-output .tai-welcome {
        padding: 32px 18px;
        border-radius: 14px;
    }

    .mw-parser-output .library-hero h1,
    .mw-parser-output .tai-welcome h1 {
        font-size: 26px;
    }

    .mw-parser-output .library-hero p,
    .mw-parser-output .tai-welcome p {
        font-size: 15px;
    }

    .mw-parser-output .library-home > h2 {
        font-size: 22px;
    }

    .mw-parser-output .taipedia-latest {
        padding: 18px;
    }

    .mw-parser-output .taipedia-latest h2 {
        font-size: 20px;
    }

    .mw-parser-output .taipedia-create-box {
        padding: 25px 15px;
    }

    .mw-parser-output .taipedia-create-box h2 {
        font-size: 22px;
    }

    .mw-parser-output {
        font-size: 16px;
        line-height: 1.85;
    }
}


/* ==================================================
   19. ACCESSIBILITY
   ================================================== */

/* Visible keyboard navigation */
.mw-parser-output .library-card a:focus-visible,
.mw-parser-output .tai-panel a:focus-visible,
.taipedia-create-box input:focus-visible,
.taipedia-create-box button:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {

    .mw-parser-output .library-card,
    .mw-parser-output .library-card a,
    .mw-parser-output .tai-panel a {
        transition: none;
    }

    .mw-parser-output .library-card:hover {
        transform: none;
    }
}


/* TAIPEDIA CONTENTS PAGE */

.tai-contents {
    max-width: 1200px;
    margin: 0 auto;
    font-family: "TaipediaShan",
                 "Noto Sans Myanmar",
                 sans-serif;
}

.tai-contents-header {
    background: #f0f6ff;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    margin-bottom: 28px;
}

.tai-contents-header h2 {
    border: none;
    color: #173a70;
    font-size: 30px;
    margin: 0 0 10px;
}

.tai-contents-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 25px 0 35px;
}

.tai-contents-card {
    background: #ffffff;
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    padding: 24px;
    min-width: 0;
    box-shadow: 0 3px 12px rgba(0,0,0,0.05);
    transition: transform .2s, box-shadow .2s;
}

.tai-contents-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 9px 22px rgba(0,0,0,0.10);
}

.tai-contents-card h3 {
    font-family: "TaipediaShan",
                 "Noto Sans Myanmar",
                 sans-serif !important;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.8;
    border: none;
    margin: 0 0 14px;
}

.tai-contents-card a {
    color: #2459a6;
    text-decoration: none;
}

.tai-contents-card a:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .tai-contents-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .tai-contents-grid {
        grid-template-columns: 1fr;
    }

    .tai-contents-header {
        padding: 22px 15px;
    }
}


/* =====================================
   KNOWLEDGE HUB - MEDIAWIKI HOMEPAGE
   ===================================== */

.kh-home {
    --kh-blue: #2563eb;
    --kh-text: #17263c;
    --kh-muted: #64748b;
    --kh-border: #e2e8f0;

    max-width: 1200px;
    margin: 0 auto;
    color: var(--kh-text);
    font-family: system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.kh-home * {
    box-sizing: border-box;
}

/* HERO */

.kh-hero {
    background: linear-gradient(
        135deg, #10233f, #1e3a5f, #233f74
    );
    border-radius: 22px;
    padding: 72px 24px;
    text-align: center;
    color: #ffffff;
}

.kh-hero-inner {
    max-width: 720px;
    margin: auto;
}

.kh-eyebrow {
    color: #67e8f9;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 14px;
}

.kh-hero h1 {
    color: #ffffff !important;
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 16px;
    padding: 0;
    border: none;
}

.kh-hero p {
    color: #cbd5e1;
    font-size: 16px;
    margin-bottom: 28px;
}

.kh-hero-links {
    margin-top: 18px;
    font-size: 13px;
    color: #cbd5e1;
}

.kh-hero-links a {
    color: #ffffff !important;
    text-decoration: none;
}

.kh-hero-links a:hover {
    text-decoration: underline;
}

/* SEARCH */

.kh-search {
    max-width: 540px;
    margin: 0 auto;
}

.kh-search .mw-inputbox-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.kh-search input[type="text"] {
    flex: 1 1 230px;
    min-width: 0;
    padding: 13px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #1e293b;
    font-size: 15px;
}

.kh-search input[type="submit"] {
    padding: 13px 22px;
    background: #2563eb;
    color: #ffffff;
    border: 0;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.kh-search input[type="submit"]:hover {
    background: #1d4ed8;
}

/* SECTIONS */

.kh-section {
    margin-top: 48px;
}

.kh-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.kh-section h2 {
    font-size: 25px;
    font-weight: 750;
    color: var(--kh-text);
    border: none;
    padding: 0;
    margin: 0;
}

.kh-section-head > a {
    color: var(--kh-blue);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

/* CATEGORY GRID */

.kh-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.kh-card {
    padding: 26px 22px;
    background: #ffffff;
    border: 1px solid var(--kh-border);
    border-radius: 16px;
    box-shadow: 0 3px 14px rgba(20, 40, 70, .035);
    transition: transform .2s ease,
                box-shadow .2s ease;
}

.kh-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(20, 40, 70, .12);
}

.kh-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    margin-bottom: 20px;
}

.kh-blue   { background: #dbeafe; }
.kh-green  { background: #dcfce7; }
.kh-yellow { background: #fef3c7; }
.kh-purple { background: #f3e8ff; }

.kh-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}

.kh-card h3 a {
    color: var(--kh-text);
    text-decoration: none;
}

.kh-card p {
    color: var(--kh-muted);
    font-size: 14px;
    line-height: 1.7;
    min-height: 48px;
    margin: 0 0 18px;
}

.kh-card > a:last-child {
    color: var(--kh-blue);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

/* LATEST ARTICLES */

.kh-article-list {
    padding: 26px;
    background: #ffffff;
    border: 1px solid var(--kh-border);
    border-radius: 16px;
}

.kh-article-list ul {
    margin: 0;
    padding-left: 22px;
}

.kh-article-list li {
    padding: 12px 0;
    line-height: 1.6;
    border-bottom: 1px solid #f1f5f9;
}

.kh-article-list li:last-child {
    border-bottom: none;
}

.kh-article-list a {
    color: #1e40af;
    font-weight: 600;
    text-decoration: none;
}

.kh-article-list a:hover {
    text-decoration: underline;
}

/* BOTTOM CTA */

.kh-category-footer {
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    padding: 40px 24px;
    text-align: center;
}

.kh-category-footer h2 {
    font-size: 25px;
    margin-bottom: 10px;
}

.kh-category-footer p {
    color: #475569;
    font-size: 15px;
}

.kh-footer-actions {
    margin-top: 25px;
}

.kh-footer-actions a {
    display: inline-block;
    background: #2563eb;
    color: #ffffff !important;
    border-radius: 10px;
    padding: 13px 22px;
    text-decoration: none;
    font-weight: 600;
}

/* TABLET */

@media (max-width: 1000px) {
    .kh-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* MOBILE */

@media (max-width: 600px) {
    .kh-hero {
        padding: 48px 18px;
        border-radius: 15px;
    }

    .kh-hero h1 {
        font-size: 31px;
    }

    .kh-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .kh-section {
        margin-top: 34px;
    }

    .kh-section h2 {
        font-size: 22px;
    }

    .kh-card {
        padding: 22px;
    }

    .kh-card p {
        min-height: 0;
    }

    .kh-search .mw-inputbox-form {
        flex-direction: column;
    }

    .kh-search input[type="text"],
    .kh-search input[type="submit"] {
        width: 100%;
        flex-basis: auto;
    }

    .kh-article-list {
        padding: 18px;
    }

    .kh-category-footer {
        padding: 30px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kh-card {
        transition: none;
    }

    .kh-card:hover {
        transform: none;
    }
}




/* ==================================================
   END — TAIPEDIA STYLESHEET
   ================================================== */
Retrieved from "https://taipedia.com/index.php?title=MediaWiki:Common.css&oldid=51"