MediaWiki:Common.css: Difference between revisions

Revision as of 19:00, 9 October 2026

/* ==================================================
   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;
    }
}


/* ==================================================
   END — TAIPEDIA STYLESHEET
   ================================================== */