Lompat ke isi

MediaWiki:Common.css: Perbedaan antara revisi

Dari Maliki Encyclopedia
← Revisi sebelumnya

ADMIN-ency (bicara | kontrib)

3 grup pengguna
1.202 suntingan
Tidak ada ringkasan suntingan
Tidak ada ringkasan suntingan
 
(145 revisi perantara oleh pengguna yang sama tidak ditampilkan)
Baris 1: Baris 1:
/* =========================================================
/* =====================================
  MALIKI ENSIKLOPEDIA
  MALIKI ENCYCLOPEDIA
  Perwajahan V2 — CSS Tahap 1A
  Common.css v16
  ========================================================= */
  Full-width Knowledge Portal Hero
  Vector 2022
  ===================================== */
 
 
/* =====================================
  GLOBAL
  ===================================== */


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


/* Area konten utama */
#content {
    background: #ffffff;
}
/* Judul halaman */
.firstHeading {
.firstHeading {
     color: #004f40;
     color: #006b68;
    font-weight: 600;
}
}


/* Judul bagian */
.mw-heading2,
.mw-heading3,
.mw-heading4 {
    color: #004f40;
}
/* Tautan */
a {
a {
     color: #1f5f8b;
     color: #1f5f8b;
}
}


a:visited {
a:hover {
     color: #315f78;
     color: #006b68;
}
}


a:hover {
 
     color: #006b54;
/* =====================================
  MALIKI TOP NAVIGATION
  ===================================== */
 
#maliki-top-navigation {
    display: block;
    width: 100%;
    box-sizing: border-box;
 
    margin: 0;
    padding: 0;
 
    background: #ffffff;
 
    border-top: 1px solid #eaecf0;
     border-bottom: 1px solid #d8dee4;
 
    position: relative;
    z-index: 1000;
}
}


/* Sidebar */
 
#mw-panel {
#maliki-top-navigation .maliki-nav-inner {
     font-size: 0.95rem;
     width: 100%;
    max-width: 1200px;
 
    margin: 0 auto;
    padding: 0 20px;
 
    display: flex;
    align-items: stretch;
    justify-content: center;
 
    box-sizing: border-box;
}
}


#mw-panel .portal {
 
     margin-bottom: 1.2rem;
#maliki-top-navigation .maliki-nav-item {
     position: relative;
 
    display: flex;
    align-items: stretch;
}
}


#mw-panel .portal h3 {
 
     color: #004f40;
#maliki-top-navigation .maliki-nav-button {
     font-weight: 700;
    appearance: none;
     letter-spacing: 0.04em;
    -webkit-appearance: none;
 
    border: 0;
    background: transparent;
 
     color: #24343b;
 
    font-family: inherit;
    font-size: 14px;
     font-weight: 600;
 
    line-height: 1.4;
 
    padding: 14px 16px;
    margin: 0;
 
    cursor: pointer;
 
     white-space: nowrap;
 
    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}
}


#mw-panel .portal .body a {
 
     color: #1f5f8b;
#maliki-top-navigation .maliki-nav-arrow {
    display: inline-block;
 
    margin-left: 6px;
 
    font-size: 11px;
     color: #72777d;
 
    transform: translateY(-1px);
 
    transition:
        transform 0.18s ease,
        color 0.18s ease;
}
}


#mw-panel .portal .body a:hover {
 
     color: #006b54;
#maliki-top-navigation
.maliki-nav-item:hover
.maliki-nav-button {
 
    background: #e7f5f4;
     color: #006b68;
}
}


/* Tabel MediaWiki */
 
.wikitable {
#maliki-top-navigation
     border: 1px solid #d8e2df;
.maliki-nav-button:focus {
     background: #ffffff;
 
     background: #e7f5f4;
     color: #006b68;
 
    outline: none;
}
}


.wikitable > tr > th,
 
.wikitable > * > tr > th {
#maliki-top-navigation
     background: #eaf5f1;
.maliki-nav-item.is-open
     color: #004f40;
.maliki-nav-button {
    border-color: #d8e2df;
 
     background: #e7f5f4;
     color: #006b68;
}
}


.wikitable > tr > td,
 
.wikitable > * > tr > td {
#maliki-top-navigation
     border-color: #d8e2df;
.maliki-nav-item:hover
.maliki-nav-arrow,
 
#maliki-top-navigation
.maliki-nav-item.is-open
.maliki-nav-arrow {
 
     color: #006b68;
 
    transform: rotate(180deg);
}
}


/* Kotak navigasi pada halaman */
 
.mw-body {
/* =====================================
     border-color: #d8e2df;
  DROPDOWN
  ===================================== */
 
#maliki-top-navigation
.maliki-nav-dropdown {
 
    position: absolute;
 
    top: 100%;
    left: 0;
 
    min-width: 225px;
 
    padding: 8px 0;
 
    background: #ffffff;
 
    border: 1px solid #d8dee4;
 
     border-radius: 0 0 8px 8px;
 
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.10);
 
    display: none;
 
    z-index: 2000;
}
}


/* Footer */
 
#footer {
#maliki-top-navigation
     color: #66777d;
.maliki-nav-item.is-open
.maliki-nav-dropdown {
 
     display: block;
}
}


#footer a {
 
    color: #1f5f8b;
@media (min-width: 801px) {
 
    #maliki-top-navigation
    .maliki-nav-item:hover
    .maliki-nav-dropdown {
 
        display: block;
    }
 
}
}


/* Kotak pencarian */
 
#searchInput {
#maliki-top-navigation
     border-color: #d8e2df;
.maliki-nav-dropdown a {
 
    display: block;
 
    padding: 10px 18px;
 
    color: #24343b;
 
    font-size: 14px;
    line-height: 1.45;
 
    text-decoration: none;
 
    white-space: nowrap;
 
     border-left: 3px solid transparent;
 
    transition:
        background-color 0.16s ease,
        color 0.16s ease,
        border-color 0.16s ease;
}
}


#searchInput:focus {
 
     border-color: #006b54;
#maliki-top-navigation
     box-shadow: 0 0 0 1px #006b54;
.maliki-nav-dropdown a:hover {
 
    background: #e7f5f4;
 
    color: #006b68;
 
     border-left-color: #019d9a;
 
     text-decoration: none;
}
}


/* =========================================================
  MALIKI ENSIKLOPEDIA
  Halaman Utama — Perwajahan V2
  ========================================================= */


/* Pembungkus Halaman Utama */
/* =====================================
  HOME CONTAINER
  ===================================== */
 
.me-home {
.me-home {
    width: 100%;
     max-width: 1200px;
     max-width: 1200px;
     margin: 0 auto;
     margin: 0 auto;
}
}


/* Hero */
 
.me-hero {
/* =====================================
     padding: 2.5rem 2rem;
  FULL-WIDTH HERO
     margin-bottom: 1.5rem;
  ===================================== */
     background: linear-gradient(135deg, #f7fbf9 0%, #eef6f3 100%);
 
     border: 1px solid #d8e2df;
.me-home-hero {
     border-radius: 12px;
 
    width: 100vw;
 
    max-width: none;
 
     box-sizing: border-box;
 
    margin-top: 0;
 
     margin-bottom: 55px;
 
    margin-left: 50%;
 
     transform: translateX(-50%);
 
    padding: 0;
 
    background: #f7f9f9;
 
     border: 0;
 
     border-radius: 0;
 
    box-shadow: none;
 
    overflow: hidden;
}
 
 
/* =====================================
  HERO INNER
  ===================================== */
 
.me-home-hero-inner {
 
    width: 100%;
 
    max-width: 1180px;
 
    margin: 0 auto;
 
    padding: 82px 40px 68px;
 
    box-sizing: border-box;
 
     text-align: center;
     text-align: center;
}
}


.me-hero-title {
 
     color: #004f40;
/* =====================================
     font-size: 2.4rem;
  HERO LABEL
  ===================================== */
 
.me-home-hero-label {
 
    display: block;
 
    margin-bottom: 22px;
 
    padding: 0;
 
    border: 0;
 
    border-radius: 0;
 
    background: transparent;
 
     color: #019d9a;
 
     font-size: 13px;
 
     font-weight: 700;
     font-weight: 700;
     margin-bottom: 0.4rem;
 
     letter-spacing: 0.12em;
 
    text-transform: uppercase;
}
}


.me-hero-subtitle {
 
     color: #b58a2a;
/* =====================================
     font-size: 1.15rem;
  HERO TITLE
  ===================================== */
 
.me-home-hero h1 {
 
    margin: 0 auto 18px;
 
    padding: 0;
 
    border: 0;
 
     color: #006b68;
 
    font-family:
        Georgia,
        "Times New Roman",
        serif;
 
     font-size: 54px;
 
    font-weight: 500;
 
    line-height: 1.15;
}
 
 
/* =====================================
  HERO INSTITUTION
  ===================================== */
 
.me-home-hero-institution {
 
    margin: 0 auto 22px;
 
    color: #24343b;
 
    font-size: 18px;
 
     font-weight: 600;
     font-weight: 600;
     margin-bottom: 1rem;
 
     line-height: 1.6;
}
}


.me-hero-description {
 
     max-width: 820px;
/* =====================================
  HERO DESCRIPTION
  ===================================== */
 
.me-home-hero-description {
 
     max-width: 780px;
 
     margin: 0 auto;
     margin: 0 auto;
     color: #40545a;
 
     line-height: 1.7;
     color: #54595d;
 
    font-size: 17px;
 
     line-height: 1.8;
}
}


/* Section */
 
.me-section {
/* =====================================
     margin-bottom: 1.5rem;
  HERO SEARCH
  ===================================== */
 
.me-home-search {
 
    width: 100%;
 
    max-width: 760px;
 
    margin: 38px auto 0;
 
    padding: 0;
 
    background: transparent;
 
    border: 0;
 
    border-radius: 0;
}
 
 
/* =====================================
  SEARCH FORM
  ===================================== */
 
.me-home-search form {
 
    display: flex;
 
    align-items: stretch;
 
    justify-content: center;
 
    gap: 8px;
 
    width: 100%;
 
     margin: 0;
}
 
 
/* =====================================
  SEARCH INPUT
  ===================================== */
 
.me-home-search input[type="search"] {
 
    flex: 1 1 auto;
 
    min-width: 0;
 
    height: 50px;
 
    box-sizing: border-box;
 
    padding: 0 17px;
 
    border: 1px solid #b8cecc;
 
    border-radius: 4px;
 
    background: #ffffff;
 
    color: #24343b;
 
    font-family: inherit;
 
    font-size: 15px;
 
    outline: none;
 
    box-shadow: none;
 
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}
 
 
.me-home-search input[type="search"]:focus {
 
    border-color: #019d9a;
 
    box-shadow:
        0 0 0 2px rgba(1, 157, 154, 0.12);
}
}


.me-section-title {
 
     color: #004f40;
/* =====================================
     font-size: 1.45rem;
  SEARCH BUTTON
  ===================================== */
 
.me-home-search input[type="submit"] {
 
    height: 50px;
 
    box-sizing: border-box;
 
    padding: 0 24px;
 
    border: 1px solid #019d9a;
 
    border-radius: 4px;
 
    background: #019d9a;
 
     color: #ffffff;
 
    font-family: inherit;
 
     font-size: 14px;
 
     font-weight: 700;
     font-weight: 700;
     margin-bottom: 0.8rem;
 
     border-bottom: 2px solid #d8e2df;
    cursor: pointer;
     padding-bottom: 0.45rem;
 
     transition:
        background-color 0.18s ease,
        border-color 0.18s ease;
}
 
 
.me-home-search input[type="submit"]:hover {
 
     background: #006b68;
 
     border-color: #006b68;
}
}


/* Grid kartu */
 
.me-grid {
.me-home-search input[type="submit"]:focus {
     display: grid;
 
     grid-template-columns: repeat(5, 1fr);
     outline: none;
    gap: 0.75rem;
 
     box-shadow:
        0 0 0 2px rgba(1, 157, 154, 0.18);
}
}


/* Kartu */
 
.me-card {
/* =====================================
    display: flex;
  HERO LINKS
    align-items: center;
  ===================================== */
     justify-content: center;
 
    min-height: 64px;
.me-home-hero-links {
     padding: 0.8rem;
 
    background: #ffffff;
     margin-top: 28px;
    border: 1px solid #d8e2df;
 
     border-radius: 8px;
     color: #72777d;
     text-align: center;
 
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
     font-size: 14px;
 
     line-height: 1.6;
}
}


.me-card a {
 
     color: #1f5f8b;
.me-home-hero-links a {
 
     color: #006b68;
 
     font-weight: 600;
     font-weight: 600;
     text-decoration: none;
     text-decoration: none;
}
}


.me-card:hover {
 
     border-color: #006b54;
.me-home-hero-links a:hover {
     box-shadow: 0 2px 8px rgba(0, 79, 64, 0.10);
 
     color: #019d9a;
 
     text-decoration: underline;
}
}


.me-card:hover a {
 
     color: #006b54;
/* =====================================
  EXISTING HERO IMAGE
  ===================================== */
 
.me-hero-image {
 
    width: 100%;
 
    margin: 25px auto 0;
 
     text-align: center;
}
}


/* Grid bidang */
 
.me-field-grid {
.me-hero-image img {
     display: grid;
 
     grid-template-columns: repeat(3, 1fr);
    width: 100%;
     gap: 0.75rem;
 
    height: 220px;
 
    object-fit: cover;
 
    display: block;
}
 
 
/* =====================================
  EXISTING HERO CONTENT
  ===================================== */
 
.me-hero {
 
    background: #ffffff;
 
    border: 0;
 
    border-radius: 0;
 
    text-align: center;
 
    margin: 0 auto 45px;
 
    padding: 25px 40px 35px;
}
 
 
.me-hero h1 {
 
    font-family: Georgia, serif;
 
    font-size: 54px;
 
    font-weight: normal;
 
    color: #006b68;
 
    margin: 0 auto 15px;
 
    padding-bottom: 10px;
 
    border-bottom: 0;
 
     max-width: 850px;
}
 
 
.me-hero h3.tagline {
 
     font-size: 24px;
 
    font-weight: bold;
 
    color: #24343b;
 
     margin: 25px 0 15px;
}
 
 
.me-hero p {
 
    font-size: 17px;
 
    line-height: 1.6;
 
    max-width: 850px;
 
    margin: 15px auto;
}
}


/* Grid relasi */
 
.me-relation-grid {
/* =====================================
     display: grid;
  FEATURED GRID
     grid-template-columns: repeat(5, 1fr);
  ===================================== */
     gap: 0.65rem;
 
.featured-grid {
 
     display: flex;
 
     justify-content: center;
 
    align-items: flex-start;
 
     gap: 24px;
 
    margin: 25px auto 55px;
}
}


.me-relation-card {
 
     padding: 0.9rem 0.6rem;
.featured-item {
    background: #faf9f5;
 
     border: 1px solid #ded9ca;
     width: 300px;
    border-radius: 8px;
 
     flex: none;
 
     text-align: center;
     text-align: center;
}
}


.me-relation-code {
 
     color: #004f40;
.featured-image {
     font-weight: 700;
 
     font-size: 1.05rem;
    height: 130px;
 
     background: #f7f9f9;
 
     border: 0;
 
    border-radius: 0;
 
     display: flex;
 
    justify-content: center;
 
    align-items: center;
}
}


.me-relation-label {
 
     margin-top: 0.3rem;
.featured-image img {
     color: #40545a;
 
     font-size: 0.9rem;
    max-width: 120px;
 
     max-height: 120px;
 
    width: auto;
 
     height: auto;
 
     object-fit: contain;
}
}


/* Kontributor */
 
.me-contribute-grid {
.featured-item h3 {
     display: grid;
 
     grid-template-columns: repeat(3, 1fr);
     color: #006b68;
     gap: 0.75rem;
 
     font-size: 21px;
 
     margin: 15px 0 10px;
}
}


.me-contribute-card {
 
     padding: 1rem;
.featured-item p {
     background: #f8f5ed;
 
    border: 1px solid #e4dcc8;
     max-width: 240px;
     border-radius: 8px;
 
     text-align: center;
     margin: 0 auto;
 
     font-size: 14px;
 
     line-height: 1.55;
}
}


.me-contribute-card a {
 
     color: #006b54;
.featured-item a {
     font-weight: 600;
 
    display: inline-block;
 
    margin-top: 15px;
 
     color: #006b68;
 
     font-weight: bold;
 
     text-decoration: none;
     text-decoration: none;
}
}


/* Responsif */
@media screen and (max-width: 900px) {
    .me-grid {
        grid-template-columns: repeat(3, 1fr);
    }


     .me-relation-grid {
.featured-item a:hover {
        grid-template-columns: repeat(3, 1fr);
 
     }
     color: #019d9a;
}
 
 
/* =====================================
  ARTICLE
  ===================================== */
 
.me-article {
 
    max-width: 900px;
 
    margin: auto;
}
 
 
.me-article-header h1 {
 
    font-family: Georgia, serif;
 
    font-size: 42px;
 
    color: #006b68;
 
    border-bottom: 0;
 
    padding-bottom: 15px;
}
 
 
.me-article-image {
 
    text-align: center;
 
     margin: 25px 0;
}
 
 
.me-article-image img {
 
    max-width: 350px;
 
    height: auto;
}
}


@media screen and (max-width: 600px) {
    .me-grid,
    .me-field-grid,
    .me-relation-grid,
    .me-contribute-grid {
        grid-template-columns: 1fr;
    }


    .me-hero {
.me-summary {
        padding: 1.5rem 1rem;
 
     }
    background: #e7f5f4;
 
    border-left: 4px solid #019d9a;
 
     padding: 20px;


     .me-hero-title {
     margin: 30px 0;
        font-size: 1.8rem;
    }
}
}
/* =========================================================
  MALIKI ENSIKLOPEDIA
  Perwajahan V2 — CSS Tahap 1B
  Penyempurnaan visual
  ========================================================= */


/* Area section */
 
.me-section {
.me-section {
     margin: 0 0 2rem 0;
 
     margin: 35px 0;
}
}


.me-section-title {
 
     color: #004f40;
.me-section h2 {
    font-size: 1.5rem;
 
     font-weight: 700;
     color: #006b68;
    margin: 0 0 1rem 0;
 
     padding-bottom: 0.55rem;
     border-bottom: 0;
    border-bottom: 2px solid #d8e2df;
 
     padding-bottom: 8px;
}
}


/* Kartu umum */
 
.me-card {
/* =====================================
    min-height: 72px;
  NAVIGASI PENGETAHUAN
    padding: 1rem;
  ===================================== */
    background: #ffffff;
 
    border: 1px solid #d8e2df;
.me-navigation {
     border-radius: 10px;
 
    box-sizing: border-box;
     margin: 35px 0;
    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);
.me-navigation h2 {
     border-color: #006b54;
 
     background: #fbfdfc;
     color: #006b68;
     box-shadow: 0 5px 14px rgba(0, 79, 64, 0.12);
 
    font-size: 24px;
 
     margin-bottom: 25px;
 
     border-bottom: 0;
 
     padding-bottom: 10px;
}
}


.me-card a {
 
    display: block;
.me-navigation-table {
 
     width: 100%;
     width: 100%;
    color: #1f5f8b;
 
     font-weight: 600;
     border-collapse: collapse;
     text-decoration: none;
 
     margin-top: 20px;
}
}


.me-card:hover a {
 
     color: #006b54;
.me-navigation-table th {
 
    width: 180px;
 
    text-align: left;
 
     background: #e7f5f4;
 
    padding: 12px;
 
    border: 0;
 
    font-weight: bold;
}
}


/* Kartu bidang */
 
.me-field-grid .me-card {
.me-navigation-table td {
     min-height: 68px;
 
     padding: 12px;
 
    border: 0;
}
}


/* Kartu relasi Islam–Sains */
 
.me-relation-card {
.me-navigation-table a {
    min-height: 92px;
 
     box-sizing: border-box;
     color: #1f5f8b;
    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
}


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


/* Kode relasi */
 
.me-relation-code {
.me-knowledge-navigation {
     letter-spacing: 0.03em;
 
     margin-top: 35px;
 
    margin-bottom: 35px;
}
}


/* Keterangan relasi */
 
.me-relation-label {
/* =====================================
     line-height: 1.45;
  JELAJAH PENGETAHUAN
  ===================================== */
 
.me-grid {
 
    display: grid;
 
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
 
    gap: 24px;
 
    width: 100%;
 
    margin: 20px 0 45px;
 
     align-items: stretch;
}
}


/* Kartu kontribusi */
 
.me-contribute-card {
.me-card {
     min-height: 78px;
 
    border: 1px solid #e1e8e7;
 
     background: #ffffff;
 
    padding: 20px;
 
     box-sizing: border-box;
     box-sizing: border-box;
     transition:
 
        transform 0.15s ease,
     border-radius: 6px;
        border-color 0.15s ease,
 
        box-shadow 0.15s ease;
    box-shadow: none;
 
    width: 100%;
 
    min-width: 0;
}
}


.me-contribute-card:hover {
 
     transform: translateY(-2px);
.me-card img {
     border-color: #b58a2a;
 
     box-shadow: 0 5px 14px rgba(181, 138, 42, 0.12);
     width: 100%;
 
    max-width: 250px;
 
    height: 180px;
 
     object-fit: contain;
 
    display: block;
 
     margin: 0 auto 14px;
}
}


.me-contribute-card a {
 
     display: block;
.me-card a {
 
     color: #006b68;
 
     text-decoration: none;
     text-decoration: none;
    font-weight: bold;
}
.me-card a:hover {
    color: #019d9a;
}
}


/* Teks paragraf dalam section */
 
.me-section > p {
/* =====================================
    max-width: 900px;
  RESPONSIVE
     line-height: 1.7;
  ===================================== */
    color: #40545a;
 
@media (max-width: 1000px) {
 
    #maliki-top-navigation
    .maliki-nav-inner {
 
        justify-content: flex-start;
 
        overflow-x: auto;
 
        -webkit-overflow-scrolling: touch;
     }
 
 
    #maliki-top-navigation
    .maliki-nav-button {
 
        padding: 13px 13px;
 
        font-size: 13px;
    }
 
}
}


/* Tampilan layar besar */
 
@media screen and (min-width: 1200px) {
@media (max-width: 900px) {
 
    .featured-grid {
 
        flex-wrap: wrap;
    }
 
 
     .me-grid {
     .me-grid {
         gap: 1rem;
 
         grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
 
 
    .me-home-hero-inner {
 
        padding: 65px 30px 55px;
    }
 
 
    .me-home-hero h1 {
 
        font-size: 44px;
    }
 
}
 
 
@media (max-width: 800px) {
 
    #maliki-top-navigation {
 
        overflow: visible;
    }
 
 
    #maliki-top-navigation
    .maliki-nav-inner {
 
        padding: 0 10px;
 
        justify-content: flex-start;
 
        overflow-x: auto;
    }
 
 
    #maliki-top-navigation
    .maliki-nav-button {
 
        padding: 12px 10px;
 
        font-size: 13px;
    }
 
 
    #maliki-top-navigation
    .maliki-nav-dropdown {
 
        position: fixed;
 
        left: 10px;
 
        right: auto;
 
        top: auto;
 
        min-width: 0;
 
        width: calc(100vw - 20px);
 
        max-width: 360px;
 
        border-radius: 8px;
 
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.15);
    }
 
 
    .me-home-search form {
 
        flex-direction: column;
    }
 
 
    .me-home-search input[type="search"],
    .me-home-search input[type="submit"] {
 
        width: 100%;
    }
 
}
 
 
@media (max-width: 700px) {
 
    .me-hero {
 
        padding: 20px;
    }
 
 
    .me-hero h1 {
 
        font-size: 36px;
    }
 
 
    .me-hero h3.tagline {
 
        font-size: 20px;
     }
     }


     .me-field-grid {
 
         gap: 1rem;
     .me-hero-image img {
 
         height: 160px;
     }
     }


     .me-relation-grid {
 
         gap: 0.85rem;
    .featured-item {
 
        width: 100%;
    }
 
 
     .me-home-hero {
 
         width: 100vw;
 
        margin-left: 50%;
 
        transform: translateX(-50%);
 
        margin-top: 0;
 
        border-radius: 0;
     }
     }


     .me-contribute-grid {
 
         gap: 1rem;
     .me-home-hero-inner {
 
         padding: 48px 22px 42px;
     }
     }
    .me-home-hero h1 {
        font-size: 36px;
        line-height: 1.2;
    }
    .me-home-hero-institution {
        font-size: 15px;
    }
    .me-home-hero-description {
        font-size: 15px;
    }
    .me-home-search {
        margin-top: 28px;
    }
}
}


/* Tablet */
 
@media screen and (max-width: 900px) {
@media (max-width: 600px) {
 
     .me-grid {
     .me-grid {
         grid-template-columns: repeat(3, 1fr);
 
         grid-template-columns: 1fr;
     }
     }


     .me-field-grid,
 
     .me-contribute-grid {
     #maliki-top-navigation
         grid-template-columns: repeat(2, 1fr);
     .maliki-nav-inner {
 
         overflow-x: auto;
 
        padding: 0 6px;
     }
     }


     .me-relation-grid {
 
         grid-template-columns: repeat(3, 1fr);
    #maliki-top-navigation
     .maliki-nav-button {
 
         font-size: 12px;
 
        padding: 11px 9px;
     }
     }
}


/* Ponsel */
 
@media screen and (max-width: 600px) {
    #maliki-top-navigation
     .me-section {
     .maliki-nav-dropdown {
         margin-bottom: 1.5rem;
 
         left: 8px;
 
        width: calc(100vw - 16px);
     }
     }


     .me-section-title {
 
         font-size: 1.3rem;
     .me-home-hero-label {
 
         font-size: 11px;
     }
     }


    .me-grid,
 
     .me-field-grid,
     .me-home-hero h1 {
    .me-relation-grid,
 
    .me-contribute-grid {
         font-size: 31px;
         grid-template-columns: 1fr;
        gap: 0.65rem;
     }
     }


    .me-card,
 
     .me-field-grid .me-card,
     .me-home-hero-inner {
    .me-relation-card,
 
    .me-contribute-card {
         padding: 40px 18px 34px;
         min-height: 0;
     }
     }
}
/* =========================================
  WIKIEDITOR — ISI ARTIKEL
  ========================================= */
.me-free-text,
.me-free-text textarea,
.wikiEditor-ui-text,
.wikiEditor-ui-textarea {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}
.wikiEditor-ui {
    width: 100% !important;
    max-width: none !important;
}
.wikiEditor-ui-text {
    width: 100% !important;
}
.wikiEditor-ui-text textarea {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}
/* =========================================
  FLAGGEDREVS
  ========================================= */
#mw-fr-reviewform {
    display: none !important;
}
}

Revisi terkini sejak 27 September 2026 08.02

/* =====================================
   MALIKI ENCYCLOPEDIA
   Common.css v16
   Full-width Knowledge Portal Hero
   Vector 2022
   ===================================== */


/* =====================================
   GLOBAL
   ===================================== */

body {
    background: #ffffff;
    color: #24343b;
}

.firstHeading {
    color: #006b68;
}

a {
    color: #1f5f8b;
}

a:hover {
    color: #006b68;
}


/* =====================================
   MALIKI TOP NAVIGATION
   ===================================== */

#maliki-top-navigation {
    display: block;
    width: 100%;
    box-sizing: border-box;

    margin: 0;
    padding: 0;

    background: #ffffff;

    border-top: 1px solid #eaecf0;
    border-bottom: 1px solid #d8dee4;

    position: relative;
    z-index: 1000;
}


#maliki-top-navigation .maliki-nav-inner {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
    padding: 0 20px;

    display: flex;
    align-items: stretch;
    justify-content: center;

    box-sizing: border-box;
}


#maliki-top-navigation .maliki-nav-item {
    position: relative;

    display: flex;
    align-items: stretch;
}


#maliki-top-navigation .maliki-nav-button {
    appearance: none;
    -webkit-appearance: none;

    border: 0;
    background: transparent;

    color: #24343b;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;

    padding: 14px 16px;
    margin: 0;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}


#maliki-top-navigation .maliki-nav-arrow {
    display: inline-block;

    margin-left: 6px;

    font-size: 11px;
    color: #72777d;

    transform: translateY(-1px);

    transition:
        transform 0.18s ease,
        color 0.18s ease;
}


#maliki-top-navigation
.maliki-nav-item:hover
.maliki-nav-button {

    background: #e7f5f4;
    color: #006b68;
}


#maliki-top-navigation
.maliki-nav-button:focus {

    background: #e7f5f4;
    color: #006b68;

    outline: none;
}


#maliki-top-navigation
.maliki-nav-item.is-open
.maliki-nav-button {

    background: #e7f5f4;
    color: #006b68;
}


#maliki-top-navigation
.maliki-nav-item:hover
.maliki-nav-arrow,

#maliki-top-navigation
.maliki-nav-item.is-open
.maliki-nav-arrow {

    color: #006b68;

    transform: rotate(180deg);
}


/* =====================================
   DROPDOWN
   ===================================== */

#maliki-top-navigation
.maliki-nav-dropdown {

    position: absolute;

    top: 100%;
    left: 0;

    min-width: 225px;

    padding: 8px 0;

    background: #ffffff;

    border: 1px solid #d8dee4;

    border-radius: 0 0 8px 8px;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.10);

    display: none;

    z-index: 2000;
}


#maliki-top-navigation
.maliki-nav-item.is-open
.maliki-nav-dropdown {

    display: block;
}


@media (min-width: 801px) {

    #maliki-top-navigation
    .maliki-nav-item:hover
    .maliki-nav-dropdown {

        display: block;
    }

}


#maliki-top-navigation
.maliki-nav-dropdown a {

    display: block;

    padding: 10px 18px;

    color: #24343b;

    font-size: 14px;
    line-height: 1.45;

    text-decoration: none;

    white-space: nowrap;

    border-left: 3px solid transparent;

    transition:
        background-color 0.16s ease,
        color 0.16s ease,
        border-color 0.16s ease;
}


#maliki-top-navigation
.maliki-nav-dropdown a:hover {

    background: #e7f5f4;

    color: #006b68;

    border-left-color: #019d9a;

    text-decoration: none;
}


/* =====================================
   HOME CONTAINER
   ===================================== */

.me-home {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;
}


/* =====================================
   FULL-WIDTH HERO
   ===================================== */

.me-home-hero {

    width: 100vw;

    max-width: none;

    box-sizing: border-box;

    margin-top: 0;

    margin-bottom: 55px;

    margin-left: 50%;

    transform: translateX(-50%);

    padding: 0;

    background: #f7f9f9;

    border: 0;

    border-radius: 0;

    box-shadow: none;

    overflow: hidden;
}


/* =====================================
   HERO INNER
   ===================================== */

.me-home-hero-inner {

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;

    padding: 82px 40px 68px;

    box-sizing: border-box;

    text-align: center;
}


/* =====================================
   HERO LABEL
   ===================================== */

.me-home-hero-label {

    display: block;

    margin-bottom: 22px;

    padding: 0;

    border: 0;

    border-radius: 0;

    background: transparent;

    color: #019d9a;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


/* =====================================
   HERO TITLE
   ===================================== */

.me-home-hero h1 {

    margin: 0 auto 18px;

    padding: 0;

    border: 0;

    color: #006b68;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 54px;

    font-weight: 500;

    line-height: 1.15;
}


/* =====================================
   HERO INSTITUTION
   ===================================== */

.me-home-hero-institution {

    margin: 0 auto 22px;

    color: #24343b;

    font-size: 18px;

    font-weight: 600;

    line-height: 1.6;
}


/* =====================================
   HERO DESCRIPTION
   ===================================== */

.me-home-hero-description {

    max-width: 780px;

    margin: 0 auto;

    color: #54595d;

    font-size: 17px;

    line-height: 1.8;
}


/* =====================================
   HERO SEARCH
   ===================================== */

.me-home-search {

    width: 100%;

    max-width: 760px;

    margin: 38px auto 0;

    padding: 0;

    background: transparent;

    border: 0;

    border-radius: 0;
}


/* =====================================
   SEARCH FORM
   ===================================== */

.me-home-search form {

    display: flex;

    align-items: stretch;

    justify-content: center;

    gap: 8px;

    width: 100%;

    margin: 0;
}


/* =====================================
   SEARCH INPUT
   ===================================== */

.me-home-search input[type="search"] {

    flex: 1 1 auto;

    min-width: 0;

    height: 50px;

    box-sizing: border-box;

    padding: 0 17px;

    border: 1px solid #b8cecc;

    border-radius: 4px;

    background: #ffffff;

    color: #24343b;

    font-family: inherit;

    font-size: 15px;

    outline: none;

    box-shadow: none;

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


.me-home-search input[type="search"]:focus {

    border-color: #019d9a;

    box-shadow:
        0 0 0 2px rgba(1, 157, 154, 0.12);
}


/* =====================================
   SEARCH BUTTON
   ===================================== */

.me-home-search input[type="submit"] {

    height: 50px;

    box-sizing: border-box;

    padding: 0 24px;

    border: 1px solid #019d9a;

    border-radius: 4px;

    background: #019d9a;

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease;
}


.me-home-search input[type="submit"]:hover {

    background: #006b68;

    border-color: #006b68;
}


.me-home-search input[type="submit"]:focus {

    outline: none;

    box-shadow:
        0 0 0 2px rgba(1, 157, 154, 0.18);
}


/* =====================================
   HERO LINKS
   ===================================== */

.me-home-hero-links {

    margin-top: 28px;

    color: #72777d;

    font-size: 14px;

    line-height: 1.6;
}


.me-home-hero-links a {

    color: #006b68;

    font-weight: 600;

    text-decoration: none;
}


.me-home-hero-links a:hover {

    color: #019d9a;

    text-decoration: underline;
}


/* =====================================
   EXISTING HERO IMAGE
   ===================================== */

.me-hero-image {

    width: 100%;

    margin: 25px auto 0;

    text-align: center;
}


.me-hero-image img {

    width: 100%;

    height: 220px;

    object-fit: cover;

    display: block;
}


/* =====================================
   EXISTING HERO CONTENT
   ===================================== */

.me-hero {

    background: #ffffff;

    border: 0;

    border-radius: 0;

    text-align: center;

    margin: 0 auto 45px;

    padding: 25px 40px 35px;
}


.me-hero h1 {

    font-family: Georgia, serif;

    font-size: 54px;

    font-weight: normal;

    color: #006b68;

    margin: 0 auto 15px;

    padding-bottom: 10px;

    border-bottom: 0;

    max-width: 850px;
}


.me-hero h3.tagline {

    font-size: 24px;

    font-weight: bold;

    color: #24343b;

    margin: 25px 0 15px;
}


.me-hero p {

    font-size: 17px;

    line-height: 1.6;

    max-width: 850px;

    margin: 15px auto;
}


/* =====================================
   FEATURED GRID
   ===================================== */

.featured-grid {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 24px;

    margin: 25px auto 55px;
}


.featured-item {

    width: 300px;

    flex: none;

    text-align: center;
}


.featured-image {

    height: 130px;

    background: #f7f9f9;

    border: 0;

    border-radius: 0;

    display: flex;

    justify-content: center;

    align-items: center;
}


.featured-image img {

    max-width: 120px;

    max-height: 120px;

    width: auto;

    height: auto;

    object-fit: contain;
}


.featured-item h3 {

    color: #006b68;

    font-size: 21px;

    margin: 15px 0 10px;
}


.featured-item p {

    max-width: 240px;

    margin: 0 auto;

    font-size: 14px;

    line-height: 1.55;
}


.featured-item a {

    display: inline-block;

    margin-top: 15px;

    color: #006b68;

    font-weight: bold;

    text-decoration: none;
}


.featured-item a:hover {

    color: #019d9a;
}


/* =====================================
   ARTICLE
   ===================================== */

.me-article {

    max-width: 900px;

    margin: auto;
}


.me-article-header h1 {

    font-family: Georgia, serif;

    font-size: 42px;

    color: #006b68;

    border-bottom: 0;

    padding-bottom: 15px;
}


.me-article-image {

    text-align: center;

    margin: 25px 0;
}


.me-article-image img {

    max-width: 350px;

    height: auto;
}


.me-summary {

    background: #e7f5f4;

    border-left: 4px solid #019d9a;

    padding: 20px;

    margin: 30px 0;
}


.me-section {

    margin: 35px 0;
}


.me-section h2 {

    color: #006b68;

    border-bottom: 0;

    padding-bottom: 8px;
}


/* =====================================
   NAVIGASI PENGETAHUAN
   ===================================== */

.me-navigation {

    margin: 35px 0;
}


.me-navigation h2 {

    color: #006b68;

    font-size: 24px;

    margin-bottom: 25px;

    border-bottom: 0;

    padding-bottom: 10px;
}


.me-navigation-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 20px;
}


.me-navigation-table th {

    width: 180px;

    text-align: left;

    background: #e7f5f4;

    padding: 12px;

    border: 0;

    font-weight: bold;
}


.me-navigation-table td {

    padding: 12px;

    border: 0;
}


.me-navigation-table a {

    color: #1f5f8b;
}


.me-navigation-table a:hover {

    color: #006b68;
}


.me-knowledge-navigation {

    margin-top: 35px;

    margin-bottom: 35px;
}


/* =====================================
   JELAJAH PENGETAHUAN
   ===================================== */

.me-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;

    width: 100%;

    margin: 20px 0 45px;

    align-items: stretch;
}


.me-card {

    border: 1px solid #e1e8e7;

    background: #ffffff;

    padding: 20px;

    box-sizing: border-box;

    border-radius: 6px;

    box-shadow: none;

    width: 100%;

    min-width: 0;
}


.me-card img {

    width: 100%;

    max-width: 250px;

    height: 180px;

    object-fit: contain;

    display: block;

    margin: 0 auto 14px;
}


.me-card a {

    color: #006b68;

    text-decoration: none;

    font-weight: bold;
}


.me-card a:hover {

    color: #019d9a;
}


/* =====================================
   RESPONSIVE
   ===================================== */

@media (max-width: 1000px) {

    #maliki-top-navigation
    .maliki-nav-inner {

        justify-content: flex-start;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }


    #maliki-top-navigation
    .maliki-nav-button {

        padding: 13px 13px;

        font-size: 13px;
    }

}


@media (max-width: 900px) {

    .featured-grid {

        flex-wrap: wrap;
    }


    .me-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .me-home-hero-inner {

        padding: 65px 30px 55px;
    }


    .me-home-hero h1 {

        font-size: 44px;
    }

}


@media (max-width: 800px) {

    #maliki-top-navigation {

        overflow: visible;
    }


    #maliki-top-navigation
    .maliki-nav-inner {

        padding: 0 10px;

        justify-content: flex-start;

        overflow-x: auto;
    }


    #maliki-top-navigation
    .maliki-nav-button {

        padding: 12px 10px;

        font-size: 13px;
    }


    #maliki-top-navigation
    .maliki-nav-dropdown {

        position: fixed;

        left: 10px;

        right: auto;

        top: auto;

        min-width: 0;

        width: calc(100vw - 20px);

        max-width: 360px;

        border-radius: 8px;

        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.15);
    }


    .me-home-search form {

        flex-direction: column;
    }


    .me-home-search input[type="search"],
    .me-home-search input[type="submit"] {

        width: 100%;
    }

}


@media (max-width: 700px) {

    .me-hero {

        padding: 20px;
    }


    .me-hero h1 {

        font-size: 36px;
    }


    .me-hero h3.tagline {

        font-size: 20px;
    }


    .me-hero-image img {

        height: 160px;
    }


    .featured-item {

        width: 100%;
    }


    .me-home-hero {

        width: 100vw;

        margin-left: 50%;

        transform: translateX(-50%);

        margin-top: 0;

        border-radius: 0;
    }


    .me-home-hero-inner {

        padding: 48px 22px 42px;
    }


    .me-home-hero h1 {

        font-size: 36px;

        line-height: 1.2;
    }


    .me-home-hero-institution {

        font-size: 15px;
    }


    .me-home-hero-description {

        font-size: 15px;
    }


    .me-home-search {

        margin-top: 28px;
    }

}


@media (max-width: 600px) {

    .me-grid {

        grid-template-columns: 1fr;
    }


    #maliki-top-navigation
    .maliki-nav-inner {

        overflow-x: auto;

        padding: 0 6px;
    }


    #maliki-top-navigation
    .maliki-nav-button {

        font-size: 12px;

        padding: 11px 9px;
    }


    #maliki-top-navigation
    .maliki-nav-dropdown {

        left: 8px;

        width: calc(100vw - 16px);
    }


    .me-home-hero-label {

        font-size: 11px;
    }


    .me-home-hero h1 {

        font-size: 31px;
    }


    .me-home-hero-inner {

        padding: 40px 18px 34px;
    }

}


/* =========================================
   WIKIEDITOR — ISI ARTIKEL
   ========================================= */

.me-free-text,
.me-free-text textarea,
.wikiEditor-ui-text,
.wikiEditor-ui-textarea {

    width: 100% !important;

    max-width: none !important;

    box-sizing: border-box !important;
}


.wikiEditor-ui {

    width: 100% !important;

    max-width: none !important;
}


.wikiEditor-ui-text {

    width: 100% !important;
}


.wikiEditor-ui-text textarea {

    width: 100% !important;

    max-width: none !important;

    box-sizing: border-box !important;
}


/* =========================================
   FLAGGEDREVS
   ========================================= */

#mw-fr-reviewform {

    display: none !important;
}
Diperoleh dari "https://ency.uin-malang.ac.id/index.php?title=MediaWiki:Common.css&oldid=1246"