Lompat ke isi

MediaWiki:Common.css: Perbedaan antara revisi

Dari Maliki Encyclopedia
← Revisi sebelumnyaRevisi selanjutnya →

ADMIN-ency (bicara | kontrib)

3 grup pengguna
1.008 suntingan
Tidak ada ringkasan suntingan
←Mengganti halaman dengan '→===================================== MALIKI ENCYCLOPEDIA Common.css Minimal Stabil v1.0 =====================================: →Warna dasar: body { background:#f5f8f7; color:#24343b; } →Judul halaman: .firstHeading { color:#004f40; } →Link: a { color:#1f5f8b; } a:hover { color:#006b54; } →===================================== MALIKI HEADER MENU =====================================: #maliki-header-men...'
Tanda: Penggantian
Baris 1: Baris 1:
/* TEST COMMON CSS */
/* =====================================
  MALIKI ENCYCLOPEDIA
  Common.css Minimal Stabil v1.0
===================================== */


/* =========================================================
  MALIKI ENSIKLOPEDIA
  Perwajahan V2 — CSS Tahap 1A
  ========================================================= */


/* Latar belakang halaman */
/* Warna dasar */
body {
body {
     background: #f5f8f7;
     background:#f5f8f7;
     color: #24343b;
     color:#24343b;
}
}


/* Area konten utama */
#content {
    background: #ffffff;
}


/* Judul halaman */
/* Judul halaman */
.firstHeading {
.firstHeading {
     color: #004f40;
     color:#004f40;
    font-weight: 600;
}
}


/* Judul bagian */
.mw-heading2,
.mw-heading3,
.mw-heading4 {
    color: #004f40;
}
/* =========================================================
  MALIKI ENCYCLOPEDIA
  Perwajahan V3 — V3-05C Field Card Spacing
  ========================================================= */
.me-field-grid .me-card {
    padding: 1.1rem;
}
.mw-heading4 {
    color: #004f40;
}


/* Tautan */
/* Link */
a {
a {
     color: #1f5f8b;
     color:#1f5f8b;
}
 
a:visited {
    color: #315f78;
}
}


a:hover {
a:hover {
     color: #006b54;
     color:#006b54;
}
}


/* Sidebar */
#mw-panel {
    font-size: 0.95rem;
}


#mw-panel .portal {
/* =====================================
    margin-bottom: 1.2rem;
  MALIKI HEADER MENU
}
===================================== */


#mw-panel .portal h3 {
#maliki-header-menu {
     color: #004f40;
     width:100%;
     font-weight: 700;
    box-sizing:border-box;
     letter-spacing: 0.04em;
    text-align:center;
    padding:12px;
    margin-top:10px;
    margin-bottom:20px;
     border-top:1px solid #e5e5e5;
     border-bottom:1px solid #e5e5e5;
}
}


#mw-panel .portal .body a {
#maliki-header-menu a {
     color: #1f5f8b;
     color:#00695c;
    text-decoration:none;
    font-weight:600;
    margin:0 10px;
}
}


#mw-panel .portal .body a:hover {
#maliki-header-menu a:hover {
     color: #006b54;
     color:#b8860b;
}
}


/* Tabel MediaWiki */
.wikitable {
    border: 1px solid #d8e2df;
    background: #ffffff;
}


.wikitable > tr > th,
/* =====================================
.wikitable > * > tr > th {
  KNOWLEDGE CARD
    background: #eaf5f1;
===================================== */
    color: #004f40;
    border-color: #d8e2df;
}


.wikitable > tr > td,
.knowledge-card {
.wikitable > * > tr > td {
    border:1px solid #ddd;
     border-color: #d8e2df;
    padding:15px;
     box-sizing:border-box;
    background:#ffffff;
    margin:15px 0;
}
}


/* Kotak navigasi pada halaman */
.mw-body {
    border-color: #d8e2df;
}


/* Footer */
.knowledge-card-title {
#footer {
     font-size:22px;
    color: #66777d;
     font-weight:700;
}
     color:#00695c;
 
#footer a {
    color: #1f5f8b;
}
 
/* Kotak pencarian */
#searchInput {
    border-color: #d8e2df;
}
 
#searchInput:focus {
    border-color: #006b54;
    box-shadow: 0 0 0 1px #006b54;
}
 
/* =========================================================
  MALIKI ENSIKLOPEDIA
  Halaman Utama — Perwajahan V2
  ========================================================= */
 
/* Pembungkus Halaman Utama */
.me-home {
    max-width: 1200px;
    margin: 0 auto;
}
 
/* Hero */
.me-hero {
    padding: 2.5rem 2rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #f7fbf9 0%, #eef6f3 100%);
    border: 1px solid #d8e2df;
    border-radius: 12px;
    text-align: center;
}
 
.me-hero-title {
    color: #004f40;
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}
 
.me-hero-subtitle {
    color: #b58a2a;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
 
.me-hero-description {
    max-width: 820px;
    margin: 0 auto;
    color: #40545a;
    line-height: 1.7;
}
 
/* Section */
.me-section {
    margin-bottom: 1.5rem;
}
 
.me-section-title {
    color: #004f40;
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    border-bottom: 2px solid #d8e2df;
    padding-bottom: 0.45rem;
}
 
/* Grid kartu */
.me-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}
 
/* Kartu */
.me-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 0.8rem;
    background: #ffffff;
    border: 1px solid #d8e2df;
    border-radius: 8px;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
 
.me-card a {
    color: #1f5f8b;
    font-weight: 600;
    text-decoration: none;
}
 
.me-card:hover {
    border-color: #006b54;
    box-shadow: 0 2px 8px rgba(0, 79, 64, 0.10);
}
 
.me-card:hover a {
    color: #006b54;
}
 
/* Grid bidang */
.me-field-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
 
/* Grid relasi */
.me-relation-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.65rem;
}
 
.me-relation-card {
    padding: 0.9rem 0.6rem;
    background: #faf9f5;
    border: 1px solid #ded9ca;
    border-radius: 8px;
    text-align: center;
}
 
.me-relation-code {
    color: #004f40;
    font-weight: 700;
    font-size: 1.05rem;
}
 
.me-relation-label {
    margin-top: 0.3rem;
    color: #40545a;
    font-size: 0.9rem;
}
 
/* Kontributor */
.me-contribute-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
 
.me-contribute-card {
    padding: 1rem;
    background: #f8f5ed;
    border: 1px solid #e4dcc8;
    border-radius: 8px;
    text-align: center;
}
 
.me-contribute-card a {
    color: #006b54;
    font-weight: 600;
    text-decoration: none;
}
 
/* Responsif */
@media screen and (max-width: 900px) {
    .me-grid {
        grid-template-columns: repeat(3, 1fr);
    }
 
    .me-relation-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
 
@media screen and (max-width: 600px) {
    .me-grid,
    .me-field-grid,
    .me-relation-grid,
    .me-contribute-grid {
        grid-template-columns: 1fr;
    }
 
    .me-hero {
        padding: 1.5rem 1rem;
    }
 
    .me-hero-title {
        font-size: 1.8rem;
    }
}
/* =========================================================
  MALIKI ENSIKLOPEDIA
  Perwajahan V2 — CSS Tahap 1B
  Penyempurnaan visual
  ========================================================= */
 
/* Area section */
.me-section {
    margin: 0 0 2rem 0;
}
 
.me-section-title {
    color: #004f40;
     font-size: 1.5rem;
     font-weight: 700;
     margin: 0 0 1rem 0;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid #d8e2df;
}
 
/* Kartu umum */
.me-card {
    min-height: 72px;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #d8e2df;
    border-radius: 10px;
    box-sizing: border-box;
    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}
 
.me-card:hover {
    transform: translateY(-2px);
    border-color: #006b54;
    background: #fbfdfc;
    box-shadow: 0 5px 14px rgba(0, 79, 64, 0.12);
}
 
.me-card a {
    display: block;
    width: 100%;
    color: #1f5f8b;
    font-weight: 600;
    text-decoration: none;
}
 
.me-card:hover a {
    color: #006b54;
}
 
/* Kartu bidang */
.me-field-grid .me-card {
    min-height: 68px;
}
 
/* Kartu relasi Islam–Sains */
.me-relation-card {
    min-height: 92px;
    box-sizing: border-box;
    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
}


.me-relation-card:hover {
    transform: translateY(-2px);
    border-color: #b58a2a;
    box-shadow: 0 5px 14px rgba(181, 138, 42, 0.12);
}


/* Kode relasi */
.knowledge-card-type {
.me-relation-code {
     color:#b8860b;
     letter-spacing: 0.03em;
    font-weight:600;
}
}


/* Keterangan relasi */
.me-relation-label {
    line-height: 1.45;
}


/* Kartu kontribusi */
.knowledge-card-description {
.me-contribute-card {
     line-height:1.6;
     min-height: 78px;
    box-sizing: border-box;
    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
}


.me-contribute-card:hover {
    transform: translateY(-2px);
    border-color: #b58a2a;
    box-shadow: 0 5px 14px rgba(181, 138, 42, 0.12);
}


.me-contribute-card a {
    display: block;
    text-decoration: none;
}
/* Teks paragraf dalam section */
.me-section > p {
    max-width: 900px;
    line-height: 1.7;
    color: #40545a;
}
/* Tampilan layar besar */
@media screen and (min-width: 1200px) {
    .me-grid {
        gap: 1rem;
    }
    .me-field-grid {
        gap: 1rem;
    }
    .me-relation-grid {
        gap: 0.85rem;
    }
    .me-contribute-grid {
        gap: 1rem;
    }
}
/* Tablet */
@media screen and (max-width: 900px) {
    .me-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .me-field-grid,
    .me-contribute-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .me-relation-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* Ponsel */
@media screen and (max-width: 600px) {
    .me-section {
        margin-bottom: 1.5rem;
    }
    .me-section-title {
        font-size: 1.3rem;
    }
    .me-grid,
    .me-field-grid,
    .me-relation-grid,
    .me-contribute-grid {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }
    .me-card,
    .me-field-grid .me-card,
    .me-relation-card,
    .me-contribute-card {
        min-height: 0;
    }
}
/* =========================================================
  MALIKI ENCYCLOPEDIA
  Perwajahan V2 — Halaman Internal
  ========================================================= */
/* Pembungkus halaman internal */
.me-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0.5rem 0 2rem 0;
}
/* Paragraf */
.me-page p {
    line-height: 1.75;
}
/* Daftar */
.me-page ul,
.me-page ol {
    line-height: 1.7;
}
/* Judul bagian */
.me-page .mw-heading2 {
    margin-top: 2rem;
    padding-bottom: 0.45rem;
    border-bottom: 2px solid #d8e2df;
}
/* Judul subbagian */
.me-page .mw-heading3 {
    margin-top: 1.5rem;
}
/* Tabel dalam halaman */
.me-page .wikitable {
    width: auto;
    max-width: 100%;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}
/* Responsif */
@media screen and (max-width: 600px) {
    .me-page {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
/* =========================================================
  MALIKI ENCYCLOPEDIA
  Perwajahan V3 — V3-01 Search Refinement
  ========================================================= */
#searchInput {
    min-height: 2.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid #cbd9d5;
    border-radius: 8px;
    box-sizing: border-box;
    background: #ffffff;
    color: #24343b;
}
#searchInput:focus {
    border-color: #006b54;
    box-shadow: 0 0 0 2px rgba(0, 107, 84, 0.10);
    outline: none;
}
/* MALIKI ENCYCLOPEDIA — V3-02A */
.me-hero {
    padding: 3rem 2rem;
}
/* MALIKI ENCYCLOPEDIA — V3-02B */
.me-hero {
    border-color: #cbd9d5;
}
/* MALIKI ENCYCLOPEDIA — V3-02C */
.me-hero {
    background: #f5faf8;
}
/* MALIKI ENCYCLOPEDIA — V3-02D */
.me-hero {
    box-shadow: 0 2px 8px rgba(0, 79, 64, 0.08);
}
/* =========================================================
  MALIKI ENCYCLOPEDIA
  Perwajahan V3 — V3-03B Featured Knowledge
  ========================================================= */
.me-featured {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #d8e2df;
    border-radius: 10px;
    box-sizing: border-box;
}
/* =========================================================
  MALIKI ENCYCLOPEDIA
  Perwajahan V3 — V3-03C Featured Knowledge Layout
  ========================================================= */
.me-featured-content {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 1.5rem;
    align-items: stretch;
}
/* =========================================================
  MALIKI ENCYCLOPEDIA
  Perwajahan V3 — V3-03D Visual Panel
  ========================================================= */
.me-featured-visual {
    padding: 3rem 1rem;
    background: #eef6f3;
    border: 1px solid #d5e1dd;
    border-radius: 8px;
    text-align: center;
}
.me-featured-visual-label {
    color: #004f40;
    font-weight: 700;
}
/* =========================================================
  MALIKI ENCYCLOPEDIA
  Perwajahan V3 — V3-04A Article Type Cards
  ========================================================= */
.me-card {
    background: #fbfcfc;
}
/* =========================================================
  MALIKI ENCYCLOPEDIA
  Perwajahan V3 — V3-04B Article Type Accent
  ========================================================= */
.me-grid .me-card {
    border-top: 3px solid #d8e2df;
}
/* =========================================================
  MALIKI ENCYCLOPEDIA
  Perwajahan V3 — V3-05A Field Cards
  ========================================================= */
.me-field-grid .me-card {
    background: #f8faf9;
}
/* =========================================================
  MALIKI ENCYCLOPEDIA
  Perwajahan V3 — V3-05B Field Card Accent
  ========================================================= */
.me-field-grid .me-card {
    border-left: 4px solid #d8e2df;
}
/* =========================================================
  MALIKI ENCYCLOPEDIA
  Perwajahan V3 — V3-05D Islam–Science Relation
  ========================================================= */
.me-relation-card {
    background: #fbfaf6;
}
/* =========================================================
  MALIKI ENCYCLOPEDIA
  Perwajahan V3 — V3-05E Relation Border
  ========================================================= */
.me-relation-card {
    border-color: #d8cfb8;
}
/* =========================================================
  MALIKI ENCYCLOPEDIA
  Perwajahan V3 — V3-06A Contribution Cards
  ========================================================= */
.me-contribute-card {
    background: #f7f4ec;
}
/* =========================================================
  MALIKI ENCYCLOPEDIA
  Perwajahan V3 — V3-06B Contribution Link
  ========================================================= */
.me-contribute-card a:hover {
    text-decoration: underline;
}
/* =========================================================
  MALIKI ENCYCLOPEDIA
  Perwajahan V3 — V3-06C Consistent Card Links
  ========================================================= */
.me-card a:hover {
    text-decoration: underline;
}
/* V3-06C — Underline Hover */
.me-card a:hover {
    text-decoration: underline;
}
/* V3-14B — Perspektif Keilmuan 4 Kolom */
.me-perspective-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
/* V3-19A — Interaksi Tombol Mulai Jelajah */
.me-hero a:hover {
    text-decoration: none;
}
/* Hide Main Page title */
.page-Halaman_Utama .firstHeading {
    display: none;
}
/* ===================================
  MALIKI HEADER MENU
=================================== */
#maliki-header-menu {
    text-align: center;
    padding: 12px;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}
#maliki-header-menu a {
    color: #00695c;
    text-decoration: none;
    font-weight: 600;
}
#maliki-header-menu a:hover {
    color: #b8860b;
}
/* =====================================
/* =====================================
   MALIKI ENCYCLOPEDIA HEADER MENU
   INFOBOX KNOWLEDGE
===================================== */
===================================== */


#maliki-header-menu {
.infobox {
    width:100%;
     border:1px solid #ddd;
    text-align:center;
    padding-top:12px;
    padding-bottom:12px;
    margin-top:10px;
    margin-bottom:20px;
    border-top:1px solid #e5e5e5;
    border-bottom:1px solid #e5e5e5;
}
 
#maliki-header-menu a {
    color:#00695c;
    text-decoration:none;
    font-weight:bold;
    margin-left:12px;
    margin-right:12px;
}
 
/* MALIKI KNOWLEDGE CARD TEST */
 
.knowledge-card {
     border: 1px solid #ddd;
    padding: 15px;
}
 
.knowledge-card-title {
    font-size: 22px;
    font-weight: bold;
}
}
/* TEST MALIKI */

Revisi per 7 September 2026 17.28

/* =====================================
   MALIKI ENCYCLOPEDIA
   Common.css Minimal Stabil v1.0
===================================== */


/* Warna dasar */
body {
    background:#f5f8f7;
    color:#24343b;
}


/* Judul halaman */
.firstHeading {
    color:#004f40;
}


/* Link */
a {
    color:#1f5f8b;
}

a:hover {
    color:#006b54;
}


/* =====================================
   MALIKI HEADER MENU
===================================== */

#maliki-header-menu {
    width:100%;
    box-sizing:border-box;
    text-align:center;
    padding:12px;
    margin-top:10px;
    margin-bottom:20px;
    border-top:1px solid #e5e5e5;
    border-bottom:1px solid #e5e5e5;
}

#maliki-header-menu a {
    color:#00695c;
    text-decoration:none;
    font-weight:600;
    margin:0 10px;
}

#maliki-header-menu a:hover {
    color:#b8860b;
}


/* =====================================
   KNOWLEDGE CARD
===================================== */

.knowledge-card {
    border:1px solid #ddd;
    padding:15px;
    box-sizing:border-box;
    background:#ffffff;
    margin:15px 0;
}


.knowledge-card-title {
    font-size:22px;
    font-weight:700;
    color:#00695c;
}


.knowledge-card-type {
    color:#b8860b;
    font-weight:600;
}


.knowledge-card-description {
    line-height:1.6;
}


/* =====================================
   INFOBOX KNOWLEDGE
===================================== */

.infobox {
    border:1px solid #ddd;
}
Diperoleh dari "https://ency.uin-malang.ac.id/index.php?title=MediaWiki:Common.css&oldid=277"