Lompat ke isi

MediaWiki:Common.css: Perbedaan antara revisi

Dari Maliki Encyclopedia
← Revisi sebelumnya

ADMIN-ency (bicara | kontrib)

3 grup pengguna
1.220 suntingan
Tidak ada ringkasan suntingan
Tidak ada ringkasan suntingan
 
(10 revisi perantara oleh pengguna yang sama tidak ditampilkan)
Baris 1: Baris 1:
/* =====================================
/* =====================================
   MALIKI ENCYCLOPEDIA
   MALIKI ENCYCLOPEDIA
   Common.css v15
   Common.css v26
   Homepage + Knowledge + Header Navigation
   Full Page Homepage
   Hero Knowledge Portal
   Compact Elegant Institutional Header
   Vector 2022
   Vector 2022
   ===================================== */
   ===================================== */
/* =====================================
  GLOBAL
  ===================================== */
body {
body {
     background: #f7f9f9;
     background:#ffffff;
     color: #24343b;
     color:#24343b;
}
}
.firstHeading {
.firstHeading {
     color: #006b68;
     color:#006b68;
}
}
a {
a {
     color: #1f5f8b;
     color:#1f5f8b;
}
}
a:hover {
a:hover {
     color: #006b68;
     color:#006b68;
}
}
/* =====================================
/* =====================================
   MALIKI TOP NAVIGATION
   HOMEPAGE
   Header Navigation — Phase 1B.1
   HILANGKAN CHROME MEDIAWIKI
   Vector 2022
   KHUSUS HALAMAN UTAMA
   ===================================== */
   ===================================== */
 
body.page-Halaman_Utama .mw-body-header {
#maliki-top-navigation {
     display:none!important;
     display: block;
}
     width: 100%;
body.page-Halaman_Utama .mw-body-header-container {
    box-sizing: border-box;
     display:none!important;
 
}
     margin: 0;
body.page-Halaman_Utama .vector-page-toolbar {
    padding: 0;
     display:none!important;
 
}
     background: #ffffff;
body.page-Halaman_Utama .vector-page-toolbar-container {
 
     display:none!important;
     border-top: 1px solid #eaecf0;
}
     border-bottom: 1px solid #d8dee4;
body.page-Halaman_Utama .mw-body-content {
 
     width:100%!important;
     position: relative;
     max-width:none!important;
     z-index: 1000;
     margin:0!important;
     padding:0!important;
}
}
 
body.page-Halaman_Utama .mw-body {
 
     width:100%!important;
/* =====================================
     max-width:none!important;
  NAVIGATION INNER
     margin:0!important;
  ===================================== */
     padding:0!important;
 
#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;
}
}
 
body.page-Halaman_Utama .mw-page-container {
 
     width:100%!important;
/* =====================================
    max-width:none!important;
  NAVIGATION ITEM
     margin:0!important;
  ===================================== */
     padding:0!important;
 
#maliki-top-navigation .maliki-nav-item {
     position: relative;
 
     display: flex;
     align-items: stretch;
}
}
 
body.page-Halaman_Utama .mw-content-container {
 
     width:100%!important;
/* =====================================
     max-width:none!important;
  NAVIGATION BUTTON
     margin:0!important;
  ===================================== */
     padding:0!important;
 
#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;
}
}
 
body.page-Halaman_Utama .mw-parser-output {
 
     width:100%!important;
/* =====================================
     max-width:none!important;
  NAVIGATION ARROW
     margin:0!important;
  ===================================== */
     padding:0!important;
 
#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;
}
}
/* =====================================
/* =====================================
   NAVIGATION HOVER
   UTILITY BAR
   ===================================== */
   ===================================== */
 
#maliki-utility-bar {
#maliki-top-navigation
    width:100%;
.maliki-nav-item:hover
    height:32px;
.maliki-nav-button {
     background:#006b68;
 
     color:#ffffff;
     background: #e7f5f4;
    box-sizing:border-box;
     color: #006b68;
    position:relative;
    z-index:3000;
}
}
 
#maliki-utility-bar .maliki-utility-inner {
 
    width:100%;
#maliki-top-navigation
    max-width:1200px;
.maliki-nav-button:focus {
    height:32px;
 
    margin:0 auto;
     background: #e7f5f4;
    padding:0 24px;
     color: #006b68;
     display:flex;
 
     align-items:center;
     outline: none;
    justify-content:space-between;
     box-sizing:border-box;
}
}
 
#maliki-utility-bar .maliki-utility-left {
 
    display:flex;
/* =====================================
    align-items:center;
  OPEN STATE
     height:100%;
  ===================================== */
     gap:28px;
 
#maliki-top-navigation
.maliki-nav-item.is-open
.maliki-nav-button {
 
     background: #e7f5f4;
     color: #006b68;
}
}
 
#maliki-utility-bar .maliki-utility-left a,
 
#maliki-utility-bar .maliki-utility-right span {
#maliki-top-navigation
    color:#ffffff;
.maliki-nav-item:hover
    text-decoration:none;
.maliki-nav-arrow,
    font-family:Arial,Helvetica,sans-serif;
 
    font-size:11px;
#maliki-top-navigation
     font-weight:600;
.maliki-nav-item.is-open
     line-height:1;
.maliki-nav-arrow {
 
     color: #006b68;
 
     transform: rotate(180deg);
}
}
 
#maliki-utility-bar .maliki-utility-left a:hover {
 
     color:#dff7f5;
/* =====================================
     text-decoration:none;
  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-utility-bar .maliki-utility-right {
 
    display:flex;
/* =====================================
    align-items:center;
  DROPDOWN OPEN
     gap:16px;
  ===================================== */
 
#maliki-top-navigation
.maliki-nav-item.is-open
.maliki-nav-dropdown {
 
     display: block;
}
}
 
#maliki-utility-bar .maliki-utility-language {
 
    display:inline-flex;
/* =====================================
    align-items:center;
  DROPDOWN DESKTOP HOVER
    justify-content:center;
  ===================================== */
    min-width:26px;
 
    height:20px;
@media (min-width: 801px) {
     padding:0 7px;
 
     background:rgba(255,255,255,.12);
     #maliki-top-navigation
    border-radius:2px;
     .maliki-nav-item:hover
     font-size:10px!important;
     .maliki-nav-dropdown {
 
        display: block;
    }
 
}
}
/* =====================================
/* =====================================
   DROPDOWN LINK
   VECTOR MAIN HEADER
   ===================================== */
   ===================================== */
 
.vector-header-container {
#maliki-top-navigation
     background:#019d9a!important;
.maliki-nav-dropdown a {
     border:0!important;
 
     box-shadow:none!important;
     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;
}
}
 
.vector-header-container .vector-header {
 
     background:#019d9a!important;
/* =====================================
     color:#ffffff!important;
  DROPDOWN LINK HOVER
     border:0!important;
  ===================================== */
     box-shadow:none!important;
 
#maliki-top-navigation
.maliki-nav-dropdown a:hover {
 
     background: #e7f5f4;
 
     color: #006b68;
 
     border-left-color: #019d9a;
 
     text-decoration: none;
}
}
 
.vector-header-container .mw-header {
 
     min-height:64px;
/* =====================================
     background:#019d9a!important;
  NAVIGATION SUBTLE SHADOW
     color:#ffffff!important;
  ===================================== */
     border:0!important;
 
#maliki-top-navigation::after {
 
     content: "";
 
     position: absolute;
 
     left: 0;
    right: 0;
 
    bottom: -1px;
 
    height: 1px;
 
     background: rgba(0, 0, 0, 0.03);
}
}
/* =====================================
/* =====================================
   HOME CONTAINER
   MALIKI IDENTITY
   ===================================== */
   ===================================== */
 
.vector-header-container a,
.me-home {
.vector-header-container .mw-logo,
    max-width: 1200px;
.vector-header-container .mw-logo-wordmark {
     margin: 0 auto;
     color:#ffffff!important;
}
}
 
.vector-header-container .mw-logo {
 
     display:flex;
/* =====================================
     align-items:center;
  HERO KNOWLEDGE PORTAL
     font-weight:700;
  Homepage Hero v1.0
  ===================================== */
 
.me-home-hero {
 
    width: 100%;
 
    box-sizing: border-box;
 
    margin: 25px auto 45px;
 
     padding: 0;
 
     background:
        linear-gradient(
            135deg,
            #e7f5f4 0%,
            #f7f9f9 52%,
            #ffffff 100%
        );
 
    border: 1px solid #cfe4e2;
 
     border-radius: 14px;
 
    overflow: hidden;
 
    box-shadow:
        0 4px 18px rgba(0, 107, 104, 0.08);
}
}
 
.vector-header-container .mw-logo-icon {
 
     width:46px!important;
/* =====================================
     height:46px!important;
  HERO INNER
     margin-right:10px;
  ===================================== */
 
.me-home-hero-inner {
 
     max-width: 980px;
 
    margin: 0 auto;
 
     padding: 58px 55px 48px;
 
     text-align: center;
 
    box-sizing: border-box;
}
}
 
.vector-header-container .mw-logo-wordmark {
 
     font-family:Arial,Helvetica,sans-serif;
/* =====================================
     font-size:16px;
  HERO LABEL
     font-weight:700;
  ===================================== */
     letter-spacing:-.01em;
 
     line-height:1.2;
.me-home-hero-label {
 
     display: inline-block;
 
    margin-bottom: 18px;
 
    padding: 7px 15px;
 
    border: 1px solid #9ed6d3;
 
    border-radius: 20px;
 
    background: #ffffff;
 
    color: #006b68;
 
     font-size: 12px;
 
     font-weight: 700;
 
     letter-spacing: 0.08em;
 
     text-transform: uppercase;
}
}
 
.vector-header-container .mw-logo-tagline {
 
     color:rgba(255,255,255,.88)!important;
/* =====================================
  HERO TITLE
  ===================================== */
 
.me-home-hero h1 {
 
    margin: 0 auto 14px;
 
    padding: 0;
 
    border: 0;
 
     color: #006b68;
 
    font-family: Georgia, "Times New Roman", serif;
 
    font-size: 48px;
 
    font-weight: 500;
 
    line-height: 1.15;
}
}
/* =====================================
/* =====================================
   HERO INSTITUTION
   HEADER SEARCH
   ===================================== */
   ===================================== */
 
.vector-header-container .vector-search-box {
.me-home-hero-institution {
     margin-left:26px;
 
     margin-right:24px;
     margin: 0 auto 18px;
 
    color: #24343b;
 
    font-size: 17px;
 
     font-weight: 600;
 
    line-height: 1.6;
}
}
 
.vector-header-container .vector-search-box .cdx-text-input__input,
 
.vector-header-container .vector-search-box input {
/* =====================================
    height:38px!important;
  HERO DESCRIPTION
     background:#ffffff!important;
  ===================================== */
     border:0!important;
 
     color:#24343b!important;
.me-home-hero-description {
    border-radius:3px!important;
 
     font-family:Arial,Helvetica,sans-serif!important;
     max-width: 760px;
     font-size:13px!important;
 
     margin: 0 auto;
 
     color: #54595d;
 
     font-size: 16px;
 
     line-height: 1.75;
}
}
 
.vector-header-container .vector-search-box button {
 
     height:38px!important;
/* =====================================
     background:#f5f7f7!important;
  HERO SEARCH AREA
     border:0!important;
  ===================================== */
     color:#24343b!important;
 
     border-radius:0 3px 3px 0!important;
.me-home-search {
     font-weight:600;
 
     margin: 32px auto 0;
 
     padding: 18px;
 
     max-width: 760px;
 
     box-sizing: border-box;
 
     background: rgba(255, 255, 255, 0.82);
 
    border: 1px solid #cfe4e2;
 
     border-radius: 10px;
}
}
 
.vector-header-container .vector-user-links,
 
.vector-header-container .vector-user-links a,
/* =====================================
.vector-header-container .vector-menu-content,
  HERO SEARCH FORM
.vector-header-container .vector-menu-content a {
  ===================================== */
     color:#ffffff!important;
 
.me-home-search form {
 
    display: flex;
 
    align-items: stretch;
 
    justify-content: center;
 
    gap: 8px;
 
    width: 100%;
 
     margin: 0;
}
}
 
.vector-header-container .vector-user-links a:hover,
 
.vector-header-container .vector-menu-content a:hover {
/* =====================================
     color:#dff7f5!important;
  HERO SEARCH INPUT
  ===================================== */
 
.me-home-search input[type="search"] {
 
    flex: 1 1 auto;
 
    min-width: 0;
 
    height: 46px;
 
    box-sizing: border-box;
 
    padding: 0 15px;
 
    border: 1px solid #b8cecc;
 
    border-radius: 7px;
 
    background: #ffffff;
 
     color: #24343b;
 
    font-family: inherit;
 
    font-size: 15px;
 
    outline: none;
 
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}
}
 
.vector-header-container .vector-icon {
 
     color:#ffffff!important;
.me-home-search input[type="search"]:focus {
 
     border-color: #019d9a;
 
    box-shadow:
        0 0 0 3px rgba(1, 157, 154, 0.12);
}
}
/* =====================================
/* =====================================
   HERO SEARCH BUTTON
   TOP NAVIGATION
   ===================================== */
   ===================================== */
 
#maliki-top-navigation {
.me-home-search input[type="submit"] {
    display:block;
 
    width:100%;
     height: 46px;
     height:44px;
 
     box-sizing:border-box;
     box-sizing: border-box;
     margin:0;
 
     padding:0;
     padding: 0 20px;
     background:#019d9a;
 
     border:0;
     border: 1px solid #019d9a;
     position:relative;
 
     z-index:2000;
    border-radius: 7px;
 
     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,
        transform 0.18s ease;
}
}
 
#maliki-top-navigation .maliki-nav-inner {
 
    width:100%;
.me-home-search input[type="submit"]:hover {
    max-width:1200px;
 
    height:44px;
     background: #006b68;
    margin:0 auto;
 
     padding:0 24px;
     border-color: #006b68;
    display:flex;
 
     align-items:stretch;
     transform: translateY(-1px);
    justify-content:center;
     box-sizing:border-box;
}
}
 
#maliki-top-navigation .maliki-nav-item {
 
    position:relative;
.me-home-search input[type="submit"]:focus {
    display:flex;
 
    align-items:stretch;
     outline: none;
}
 
#maliki-top-navigation .maliki-nav-button {
     box-shadow:
    appearance:none;
        0 0 0 3px rgba(1, 157, 154, 0.16);
     -webkit-appearance:none;
    border:0;
    background:transparent;
    color:#ffffff;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.015em;
     line-height:1.4;
    padding:0 18px;
    margin:0;
    cursor:pointer;
    white-space:nowrap;
    transition:background-color .18s ease,color .18s ease;
}
}
 
#maliki-top-navigation .maliki-nav-arrow {
 
    display:inline-block;
/* =====================================
     margin-left:6px;
  HERO NAVIGATION LINKS
    font-size:9px;
  ===================================== */
     color:rgba(255,255,255,.82);
 
     transform:translateY(-1px);
.me-home-hero-links {
     transition:transform .18s ease;
 
     margin-top: 24px;
 
     color: #72777d;
 
     font-size: 14px;
 
     line-height: 1.6;
}
}
 
#maliki-top-navigation .maliki-nav-item:hover .maliki-nav-button,
 
#maliki-top-navigation .maliki-nav-item.is-open .maliki-nav-button {
.me-home-hero-links a {
     background:#006b68;
 
     color:#ffffff;
     color: #006b68;
 
     font-weight: 600;
 
    text-decoration: none;
}
}
 
#maliki-top-navigation .maliki-nav-item:hover .maliki-nav-arrow,
 
#maliki-top-navigation .maliki-nav-item.is-open .maliki-nav-arrow {
.me-home-hero-links a:hover {
     transform:rotate(180deg);
 
    color: #019d9a;
 
     text-decoration: underline;
}
}
 
#maliki-top-navigation .maliki-nav-button:focus {
 
     outline:none;
/* =====================================
     background:#006b68;
  HERO IMAGE
  Existing Homepage Component
  ===================================== */
 
.me-hero-image {
 
     width: 100%;
 
     margin: 25px auto 0;
 
    text-align: center;
}
}
 
#maliki-top-navigation .maliki-nav-dropdown {
 
    position:absolute;
.me-hero-image img {
     top:100%;
 
    left:0;
     width: 100%;
    min-width:225px;
 
     padding:7px 0;
     height: 220px;
    background:#ffffff;
 
     border:1px solid #d8dee4;
     object-fit: cover;
    border-top:3px solid #006b68;
 
    border-radius:0 0 6px 6px;
     display: block;
    box-shadow:0 8px 22px rgba(0,0,0,.12);
     display:none;
    z-index:3000;
}
}
 
#maliki-top-navigation .maliki-nav-item.is-open .maliki-nav-dropdown {
 
     display:block;
/* =====================================
  EXISTING HERO CONTENT
  ===================================== */
 
.me-hero {
 
    background: #f8f6ef;
 
    border: 1px solid #ddd;
 
    border-radius: 12px;
 
    text-align: center;
 
    margin: 0 auto 45px;
 
     padding: 25px 40px 35px;
}
}
 
@media (min-width:801px) {
 
     #maliki-top-navigation .maliki-nav-item:hover .maliki-nav-dropdown {
.me-hero h1 {
        display:block;
 
     }
     font-family: Georgia, serif;
 
    font-size: 54px;
 
    font-weight: normal;
 
    color: #006b68;
 
    margin: 0 auto 15px;
 
    padding-bottom: 10px;
 
    border-bottom: 1px solid #ccc;
 
     max-width: 850px;
}
}
 
#maliki-top-navigation .maliki-nav-dropdown a {
 
    display:block;
.me-hero h3.tagline {
    padding:10px 18px;
 
    color:#24343b;
     font-size: 24px;
     font-size:13px;
 
    line-height:1.45;
     font-weight: bold;
     text-decoration:none;
 
     white-space:nowrap;
     color: #24343b;
     border-left:3px solid transparent;
 
     margin: 25px 0 15px;
}
}
 
#maliki-top-navigation .maliki-nav-dropdown a:hover {
 
     background:#e7f5f4;
.me-hero p {
     color:#006b68;
 
     border-left-color:#019d9a;
     font-size: 17px;
     text-decoration:none;
 
     line-height: 1.6;
 
     max-width: 850px;
 
     margin: 15px auto;
}
}
/* =====================================
/* =====================================
   FEATURED GRID
   HOMEPAGE CONTAINER
  Pengetahuan Pilihan
   ===================================== */
   ===================================== */
 
.me-home {
.featured-grid {
     width:100%;
 
     max-width:none;
     display: flex;
     margin:0;
 
     padding:0;
     justify-content: center;
 
     align-items: flex-start;
 
    gap: 12px;
 
     margin: 25px auto 45px;
}
}
/* =====================================
/* =====================================
   FEATURED ITEM
   HOMEPAGE HERO
   ===================================== */
   ===================================== */
 
.me-home-hero {
.featured-item {
    width:100%;
 
    max-width:none;
     width: 300px;
    box-sizing:border-box;
 
    margin:0;
     flex: none;
    padding:0;
 
    background:#f7f9f9;
     text-align: center;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:hidden;
}
.me-home-hero-inner {
    width:100%;
    max-width:1080px;
    margin:0 auto;
    padding:58px 30px 46px;
    box-sizing:border-box;
    text-align:center;
}
.mw-parser-output .me-home-hero-label {
    display:block;
    margin:0 0 16px 0;
    padding:0;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#019d9a!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:11px!important;
    font-weight:700!important;
    letter-spacing:.16em!important;
    line-height:1.4!important;
    text-transform:uppercase;
}
.mw-parser-output .me-home-hero-title {
    display:block!important;
     width:100%!important;
    margin:0 auto 20px!important;
     padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#006b68!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:46px!important;
    font-weight:500!important;
    letter-spacing:-.012em!important;
    line-height:1.15!important;
    text-align:center!important;
}
.mw-parser-output .me-home-hero-institution {
    display:block;
    margin:0 auto 16px;
    padding:0;
    color:#24343b!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:16px!important;
    font-weight:600!important;
    line-height:1.5!important;
    text-align:center;
}
.mw-parser-output .me-home-hero-description {
    display:block;
    width:100%;
    max-width:700px;
    margin:0 auto;
    padding:0;
    color:#5b666b!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:15px!important;
    font-weight:400!important;
    line-height:1.65!important;
     text-align:center;
}
}
/* =====================================
/* =====================================
   FEATURED IMAGE
   HOMEPAGE SEARCH
   ===================================== */
   ===================================== */
 
.mw-parser-output .me-home-search {
.featured-image {
    display:block;
 
    width:100%;
     height: 130px;
    max-width:720px;
 
    margin:28px auto 0;
     background: #f8f6ef;
    padding:0;
 
    background:transparent!important;
     border: 1px solid #ddd;
    border:0!important;
 
    box-shadow:none!important;
     border-radius: 8px;
}
 
.mw-parser-output .me-home-search form {
     display: flex;
    display:flex!important;
 
    align-items:stretch!important;
     justify-content: center;
    justify-content:center!important;
 
    width:100%!important;
     align-items: center;
    max-width:720px!important;
    margin:0 auto!important;
    padding:0!important;
    gap:8px!important;
    box-sizing:border-box!important;
}
.mw-parser-output .me-home-search input[type="search"],
.mw-parser-output .me-home-search input[type="text"],
.mw-parser-output .me-home-search .mw-inputbox-input {
    display:block!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
     max-height:48px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0 16px!important;
    border:1px solid #c4d4d2!important;
    border-radius:4px!important;
     background:#ffffff!important;
    color:#24343b!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:14px!important;
    line-height:48px!important;
    outline:none!important;
    box-shadow:none!important;
}
.mw-parser-output .me-home-search input[type="search"]::placeholder,
.mw-parser-output .me-home-search input[type="text"]::placeholder {
    color:#8a9498;
}
.mw-parser-output .me-home-search input[type="search"]:focus,
.mw-parser-output .me-home-search input[type="text"]:focus {
    border-color:#019d9a!important;
    box-shadow:0 0 0 2px rgba(1,157,154,.10)!important;
}
.mw-parser-output .me-home-search input[type="submit"],
.mw-parser-output .me-home-search .mw-inputbox-button {
    display:block!important;
    flex:0 0 170px!important;
    width:170px!important;
    min-width:170px!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0 18px!important;
     border:1px solid #019d9a!important;
     border-radius:4px!important;
    background:#019d9a!important;
    color:#ffffff!important;
     font-family:Arial,Helvetica,sans-serif!important;
    font-size:14px!important;
     font-weight:700!important;
    line-height:46px!important;
     text-align:center!important;
    cursor:pointer;
}
}
 
.mw-parser-output .me-home-search input[type="submit"]:hover {
 
     background:#006b68!important;
.featured-image img {
     border-color:#006b68!important;
 
    max-width: 120px;
 
    max-height: 120px;
 
     width: auto;
 
    height: auto;
 
     object-fit: contain;
}
}
/* =====================================
/* =====================================
   FEATURED TITLE
   HOMEPAGE LINKS
   ===================================== */
   ===================================== */
 
.mw-parser-output .me-home-hero-links {
.featured-item h3 {
    display:block;
 
    margin:20px auto 0;
     color: #006b68;
    padding:0;
 
     color:#7a8589;
     font-size: 21px;
    font-family:Arial,Helvetica,sans-serif;
 
     font-size:13px;
     margin: 15px 0 10px;
    line-height:1.5;
     text-align:center;
}
.mw-parser-output .me-home-hero-links a {
    color:#006b68;
    font-weight:600;
    text-decoration:none;
}
.mw-parser-output .me-home-hero-links a:hover {
    color:#019d9a;
    text-decoration:underline;
}
}
/* =====================================
/* =====================================
   FEATURED DESCRIPTION
   HOMEPAGE — JELAJAH PENGETAHUAN
   ===================================== */
   ===================================== */
 
.me-home-section {
.featured-item p {
     width:100%;
 
     box-sizing:border-box;
     max-width: 240px;
 
    margin: 0 auto;
 
     font-size: 14px;
 
    line-height: 1.55;
}
}
 
.me-home-section-inner {
 
    width:100%;
/* =====================================
    max-width:1120px;
  FEATURED LINK
    margin:0 auto;
  ===================================== */
    padding:72px 30px;
 
    box-sizing:border-box;
.featured-item a {
}
 
.me-home-section-heading {
     display: inline-block;
    max-width:760px;
 
     margin:0 auto 42px;
     margin-top: 15px;
    text-align:center;
 
}
     color: #006b68;
.me-home-section-label {
 
     margin:0 0 10px 0;
     font-weight: bold;
    padding:0;
 
    color:#019d9a;
     text-decoration: none;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.16em;
    line-height:1.4;
    text-transform:uppercase;
}
.me-home-section-heading h2 {
    margin:0 0 14px 0;
    padding:0;
     color:#006b68;
    font-family:Georgia,"Times New Roman",serif;
    font-size:38px;
     font-weight:500;
     line-height:1.25;
}
}
 
.me-home-section-heading p {
 
    margin:0;
.featured-item a:hover {
    padding:0;
 
     color:#5b666b;
     color: #019d9a;
    font-family:Arial,Helvetica,sans-serif;
    font-size:15px;
    line-height:1.75;
}
}
 
.me-browse-section {
 
    width:100%;
/* =====================================
    background:#ffffff;
  SECOND SECTION
     border-top:1px solid #e4ecea;
  ===================================== */
    border-bottom:1px solid #e4ecea;
 
.featured-grid + h2 {
 
     margin-top: 30px;
}
}
 
.me-browse-section .me-home-section-inner {
 
     padding-top:72px;
/* =====================================
     padding-bottom:76px;
  MALIKI ARTICLE STYLE
  ===================================== */
 
.me-article {
 
     max-width: 900px;
 
     margin: auto;
}
}
 
.me-browse-grid {
 
    display:grid;
.me-article-header h1 {
     grid-template-columns:repeat(3,minmax(0,1fr));
 
    gap:22px;
     font-family: Georgia, serif;
     width:100%;
 
     margin:0;
     font-size: 42px;
     padding:0;
 
     box-sizing:border-box;
     color: #006b68;
 
     border-bottom: 1px solid #ddd;
 
     padding-bottom: 15px;
}
}
 
.me-browse-card {
 
    display:flex;
.me-article-image {
     flex-direction:column;
 
    min-width:0;
     text-align: center;
     min-height:245px;
 
    box-sizing:border-box;
     margin: 25px 0;
    padding:27px 27px 24px;
    background:#ffffff;
    border:1px solid #d8e4e2;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(24,58,58,.04);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
}
 
.me-browse-card:hover {
 
    transform:translateY(-3px);
.me-article-image img {
     border-color:#9fd4d1;
 
     box-shadow:0 8px 22px rgba(24,58,58,.09);
     max-width: 350px;
 
     height: auto;
}
}
 
.me-browse-type {
 
    margin:0 0 15px 0;
.me-summary {
    padding:0;
 
     color:#019d9a;
     background: #e7f5f4;
    font-family:Arial,Helvetica,sans-serif;
 
     font-size:10px;
     border-left: 4px solid #019d9a;
    font-weight:700;
 
     letter-spacing:.12em;
     padding: 20px;
    line-height:1.4;
 
     text-transform:uppercase;
     margin: 30px 0;
}
}
 
.me-browse-title {
 
    margin:0 0 13px 0;
.me-section {
     padding:0;
 
    color:#006b68;
     margin: 35px 0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:25px;
    font-weight:500;
    line-height:1.3;
}
}
 
.me-browse-title a {
 
     color:#006b68;
.me-section h2 {
     text-decoration:none;
 
     color: #006b68;
 
    border-bottom: 1px solid #ddd;
 
     padding-bottom: 8px;
}
}
 
.me-browse-title a:hover {
 
    color:#019d9a;
/* =====================================
     text-decoration:none;
  NAVIGASI PENGETAHUAN
  ===================================== */
 
.me-navigation {
 
     margin: 35px 0;
}
}
 
.me-browse-description {
 
    flex:1 1 auto;
.me-navigation h2 {
     margin:0;
 
    padding:0;
     color: #006b68;
     color:#5b666b;
 
     font-family:Arial,Helvetica,sans-serif;
     font-size: 24px;
     font-size:14px;
 
     line-height:1.7;
     margin-bottom: 25px;
 
     border-bottom: 1px solid #ddd;
 
     padding-bottom: 10px;
}
}
 
.me-browse-link {
 
    margin:22px 0 0 0;
.me-navigation-table {
    padding:16px 0 0 0;
 
    border-top:1px solid #edf1f0;
     width: 100%;
     color:#019d9a;
 
    font-family:Arial,Helvetica,sans-serif;
     border-collapse: collapse;
     font-size:13px;
 
    font-weight:700;
     margin-top: 20px;
     line-height:1.5;
}
}
 
.me-browse-link a {
 
     color:#019d9a;
.me-navigation-table th {
     text-decoration:none;
 
     width: 180px;
 
     text-align: left;
 
    background: #e7f5f4;
 
    padding: 12px;
 
    border: 1px solid #d8dee4;
 
    font-weight: bold;
}
}
 
.me-browse-link a:hover {
 
     color:#006b68;
.me-navigation-table td {
     text-decoration:none;
 
     padding: 12px;
 
     border: 1px solid #d8dee4;
}
}
 
.me-section-more {
 
    margin:34px 0 0 0;
.me-navigation-table a {
    padding:0;
 
     text-align:center;
     color: #1f5f8b;
}
}
 
.me-section-more a {
 
     color:#006b68;
.me-navigation-table a:hover {
    font-family:Arial,Helvetica,sans-serif;
 
    font-size:13px;
     color: #006b68;
    font-weight:600;
    text-decoration:none;
}
}
 
.me-section-more a:hover {
 
     color:#019d9a;
.me-knowledge-navigation {
     text-decoration:underline;
 
     margin-top: 35px;
 
     margin-bottom: 35px;
}
}
/* =====================================
/* =====================================
   JELAJAH PENGETAHUAN
   KNOWLEDGE GRID
   ===================================== */
   ===================================== */
.me-grid {
.me-grid {
 
     display:grid;
     display: grid;
     grid-template-columns:repeat(3,minmax(0,1fr));
 
     gap:24px;
     grid-template-columns:
     width:100%;
        repeat(3, minmax(0, 1fr));
    max-width:1200px;
 
     margin:20px auto 45px;
     gap: 20px;
    padding:0 24px;
 
    box-sizing:border-box;
     width: 100%;
     align-items:stretch;
 
     margin: 20px 0 35px;
 
     align-items: stretch;
}
}
.me-card {
.me-card {
 
     border:1px solid #e1e8e7;
     border: 1px solid #d9e2df;
     background:#ffffff;
 
     padding:20px;
     background: #fff;
     box-sizing:border-box;
 
     border-radius:6px;
     padding: 16px;
     box-shadow:none;
 
     width:100%;
     box-sizing: border-box;
     min-width:0;
 
     border-radius: 10px;
 
     box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.05);
 
     width: 100%;
 
     min-width: 0;
}
}
.me-card img {
.me-card img {
 
     width:100%;
     width: 100%;
     max-width:250px;
 
     height:180px;
     max-width: 250px;
     object-fit:contain;
 
     display:block;
     height: 180px;
     margin:0 auto 14px;
 
     object-fit: contain;
 
     display: block;
 
     margin: 0 auto 14px;
}
}
.me-card a {
.me-card a {
 
     color:#006b68;
     color: #006b68;
     text-decoration:none;
 
     font-weight:bold;
     text-decoration: none;
 
     font-weight: bold;
}
}
.me-card a:hover {
.me-card a:hover {
 
     color:#019d9a;
     color: #019d9a;
}
}
/* =====================================
/* =====================================
   RESPONSIVE
   ARTICLE
   Navigation
   ===================================== */
.me-article {
    max-width:900px;
    margin:auto;
}
.me-article-header h1 {
    font-family:Georgia,"Times New Roman",serif;
    font-size:42px;
    color:#006b68;
    border-bottom:0!important;
    padding-bottom:15px;
}
.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!important;
    padding-bottom:8px;
}
/* =====================================
  WIKIEDITOR
   ===================================== */
   ===================================== */
 
.me-free-text,
@media (max-width: 1000px) {
.me-free-text textarea,
 
.wikiEditor-ui-text,
    #maliki-top-navigation
.wikiEditor-ui-textarea {
    .maliki-nav-inner {
    width:100%!important;
 
    max-width:none!important;
        justify-content: flex-start;
    box-sizing:border-box!important;
 
}
        overflow-x: auto;
.wikiEditor-ui {
 
    width:100%!important;
        -webkit-overflow-scrolling: touch;
    max-width:none!important;
    }
}
 
.wikiEditor-ui-text {
 
     width:100%!important;
    #maliki-top-navigation
}
     .maliki-nav-button {
.wikiEditor-ui-text textarea {
 
    width:100%!important;
        padding: 13px 13px;
    max-width:none!important;
 
     box-sizing:border-box!important;
        font-size: 13px;
     }
 
}
}
/* =====================================
/* =====================================
   RESPONSIVE
   FLAGGEDREVS
  Homepage
   ===================================== */
   ===================================== */
 
#mw-fr-reviewform {
@media (max-width: 900px) {
     display:none!important;
 
    .featured-grid {
 
        flex-wrap: wrap;
     }
 
 
    .me-grid {
 
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
 
 
    .me-home-hero-inner {
 
        padding: 48px 35px 40px;
    }
 
 
    .me-home-hero h1 {
 
        font-size: 42px;
    }
 
}
}
/* =====================================
/* =====================================
   RESPONSIVE
   RESPONSIVE
  Navigation Mobile
   ===================================== */
   ===================================== */
 
@media (max-width:1000px) {
@media (max-width: 800px) {
     #maliki-top-navigation .maliki-nav-inner {
 
        justify-content:flex-start;
     #maliki-top-navigation {
         overflow-x:auto;
 
        -webkit-overflow-scrolling:touch;
         overflow: visible;
     }
     }
 
     #maliki-top-navigation .maliki-nav-button {
 
         padding:0 14px;
     #maliki-top-navigation
         font-size:12px;
    .maliki-nav-inner {
 
         padding: 0 10px;
 
        justify-content: flex-start;
 
         overflow-x: auto;
     }
     }
 
}
 
@media (max-width:900px) {
     #maliki-top-navigation
     #maliki-utility-bar .maliki-utility-right span:first-child {
    .maliki-nav-button {
         display:none;
 
        padding: 12px 10px;
 
         font-size: 13px;
     }
     }
 
     .me-grid {
 
         grid-template-columns:repeat(2,minmax(0,1fr));
    #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-browse-grid {
 
        grid-template-columns:repeat(2,minmax(0,1fr));
     .me-home-search input[type="search"],
    .me-home-search input[type="submit"] {
 
        width: 100%;
 
     }
     }
}
}
 
@media (max-width:800px) {
 
     #maliki-utility-bar .maliki-utility-inner {
/* =====================================
         padding:0 12px;
  RESPONSIVE
  Homepage Mobile
  ===================================== */
 
@media (max-width: 700px) {
 
     .me-hero {
 
         padding: 20px;
     }
     }
 
     #maliki-utility-bar .maliki-utility-left {
 
         gap:16px;
     .me-hero h1 {
 
         font-size: 36px;
     }
     }
 
     #maliki-utility-bar .maliki-utility-left a {
 
         font-size:11px;
     .me-hero h3.tagline {
 
         font-size: 20px;
     }
     }
 
     #maliki-top-navigation {
 
         overflow:visible;
     .me-hero-image img {
 
         height: 160px;
     }
     }
 
     #maliki-top-navigation .maliki-nav-inner {
 
        height:42px;
     .featured-item {
        padding:0 8px;
 
        justify-content:flex-start;
         width: 100%;
         overflow-x:auto;
     }
     }
 
     #maliki-top-navigation .maliki-nav-button {
 
         padding:0 11px;
     .me-home-hero {
         font-size:12px;
 
         margin-top: 18px;
 
         border-radius: 10px;
     }
     }
 
     #maliki-top-navigation .maliki-nav-dropdown {
 
        position:fixed;
     .me-home-hero-inner {
        left:8px;
 
        width:calc(100vw - 16px);
         padding: 40px 22px 34px;
        max-width:360px;
         border-radius:6px;
     }
     }
 
     .mw-parser-output .me-home-search form {
 
         flex-direction:column!important;
     .me-home-hero h1 {
         gap:8px!important;
 
         font-size: 36px;
 
         line-height: 1.2;
     }
     }
 
    .mw-parser-output .me-home-search input[type="search"],
 
    .mw-parser-output .me-home-search input[type="text"],
     .me-home-hero-institution {
     .mw-parser-output .me-home-search .mw-inputbox-input,
 
    .mw-parser-output .me-home-search input[type="submit"],
         font-size: 15px;
    .mw-parser-output .me-home-search .mw-inputbox-button {
        width:100%!important;
         min-width:0!important;
        flex:none!important;
     }
     }
 
}
 
@media (max-width:700px) {
     .me-home-hero-description {
     .me-browse-grid {
 
        grid-template-columns:1fr;
         font-size: 15px;
         gap:16px;
     }
     }
 
     .me-home-section-inner {
 
         padding:55px 20px;
     .me-home-search {
 
        margin-top: 26px;
 
         padding: 12px;
    }
 
}
 
 
/* =====================================
  RESPONSIVE
  Small Mobile
  ===================================== */
 
@media (max-width: 600px) {
 
    .me-grid {
 
        grid-template-columns: 1fr;
     }
     }
 
     .me-home-section-heading h2 {
 
         font-size:32px;
     #maliki-top-navigation
    .maliki-nav-inner {
 
         overflow-x: auto;
 
        padding: 0 6px;
     }
     }
 
     .vector-header-container .vector-search-box {
 
         margin-left:8px;
     #maliki-top-navigation
         margin-right:8px;
    .maliki-nav-button {
 
         font-size: 12px;
 
         padding: 11px 9px;
     }
     }
 
     .vector-header-container .mw-logo-icon {
 
         width:42px!important;
     #maliki-top-navigation
         height:42px!important;
    .maliki-nav-dropdown {
 
         left: 8px;
 
         width: calc(100vw - 16px);
     }
     }
 
     .vector-header-container .mw-logo-wordmark {
 
         font-size:15px;
     .me-home-hero-label {
 
         font-size: 11px;
 
        padding: 6px 12px;
     }
     }
 
     .mw-parser-output .me-home-hero-title {
 
         font-size:34px!important;
     .me-home-hero h1 {
 
         font-size: 31px;
     }
     }
     .me-home-hero-inner {
     .me-home-hero-inner {
 
         padding:42px 20px 34px;
         padding: 34px 18px 30px;
     }
     }
}
}
 
@media (max-width:600px) {
 
    #maliki-utility-bar .maliki-utility-left a:nth-child(2),
/* =========================================
    #maliki-utility-bar .maliki-utility-left a:nth-child(3) {
  Maliki Encyclopedia
        display:none;
  WikiEditor — Isi Artikel
     }
  ========================================= */
    .me-grid {
 
        grid-template-columns:1fr;
.me-free-text,
     }
.me-free-text textarea,
    .mw-parser-output .me-home-hero-title {
.wikiEditor-ui-text,
        font-size:30px!important;
.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
  Sembunyikan Review Form
  Sementara sampai extension dinonaktifkan
  ========================================= */
 
#mw-fr-reviewform {
 
    display: none !important;
}
}

Revisi terkini sejak 27 September 2026 12.56

/* =====================================
   MALIKI ENCYCLOPEDIA
   Common.css v26
   Full Page Homepage
   Compact Elegant Institutional Header
   Vector 2022
   ===================================== */
body {
    background:#ffffff;
    color:#24343b;
}
.firstHeading {
    color:#006b68;
}
a {
    color:#1f5f8b;
}
a:hover {
    color:#006b68;
}
/* =====================================
   HOMEPAGE
   HILANGKAN CHROME MEDIAWIKI
   KHUSUS HALAMAN UTAMA
   ===================================== */
body.page-Halaman_Utama .mw-body-header {
    display:none!important;
}
body.page-Halaman_Utama .mw-body-header-container {
    display:none!important;
}
body.page-Halaman_Utama .vector-page-toolbar {
    display:none!important;
}
body.page-Halaman_Utama .vector-page-toolbar-container {
    display:none!important;
}
body.page-Halaman_Utama .mw-body-content {
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}
body.page-Halaman_Utama .mw-body {
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}
body.page-Halaman_Utama .mw-page-container {
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}
body.page-Halaman_Utama .mw-content-container {
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}
body.page-Halaman_Utama .mw-parser-output {
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}
/* =====================================
   UTILITY BAR
   ===================================== */
#maliki-utility-bar {
    width:100%;
    height:32px;
    background:#006b68;
    color:#ffffff;
    box-sizing:border-box;
    position:relative;
    z-index:3000;
}
#maliki-utility-bar .maliki-utility-inner {
    width:100%;
    max-width:1200px;
    height:32px;
    margin:0 auto;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-sizing:border-box;
}
#maliki-utility-bar .maliki-utility-left {
    display:flex;
    align-items:center;
    height:100%;
    gap:28px;
}
#maliki-utility-bar .maliki-utility-left a,
#maliki-utility-bar .maliki-utility-right span {
    color:#ffffff;
    text-decoration:none;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    font-weight:600;
    line-height:1;
}
#maliki-utility-bar .maliki-utility-left a:hover {
    color:#dff7f5;
    text-decoration:none;
}
#maliki-utility-bar .maliki-utility-right {
    display:flex;
    align-items:center;
    gap:16px;
}
#maliki-utility-bar .maliki-utility-language {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:26px;
    height:20px;
    padding:0 7px;
    background:rgba(255,255,255,.12);
    border-radius:2px;
    font-size:10px!important;
}
/* =====================================
   VECTOR MAIN HEADER
   ===================================== */
.vector-header-container {
    background:#019d9a!important;
    border:0!important;
    box-shadow:none!important;
}
.vector-header-container .vector-header {
    background:#019d9a!important;
    color:#ffffff!important;
    border:0!important;
    box-shadow:none!important;
}
.vector-header-container .mw-header {
    min-height:64px;
    background:#019d9a!important;
    color:#ffffff!important;
    border:0!important;
}
/* =====================================
   MALIKI IDENTITY
   ===================================== */
.vector-header-container a,
.vector-header-container .mw-logo,
.vector-header-container .mw-logo-wordmark {
    color:#ffffff!important;
}
.vector-header-container .mw-logo {
    display:flex;
    align-items:center;
    font-weight:700;
}
.vector-header-container .mw-logo-icon {
    width:46px!important;
    height:46px!important;
    margin-right:10px;
}
.vector-header-container .mw-logo-wordmark {
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    font-weight:700;
    letter-spacing:-.01em;
    line-height:1.2;
}
.vector-header-container .mw-logo-tagline {
    color:rgba(255,255,255,.88)!important;
}
/* =====================================
   HEADER SEARCH
   ===================================== */
.vector-header-container .vector-search-box {
    margin-left:26px;
    margin-right:24px;
}
.vector-header-container .vector-search-box .cdx-text-input__input,
.vector-header-container .vector-search-box input {
    height:38px!important;
    background:#ffffff!important;
    border:0!important;
    color:#24343b!important;
    border-radius:3px!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:13px!important;
}
.vector-header-container .vector-search-box button {
    height:38px!important;
    background:#f5f7f7!important;
    border:0!important;
    color:#24343b!important;
    border-radius:0 3px 3px 0!important;
    font-weight:600;
}
.vector-header-container .vector-user-links,
.vector-header-container .vector-user-links a,
.vector-header-container .vector-menu-content,
.vector-header-container .vector-menu-content a {
    color:#ffffff!important;
}
.vector-header-container .vector-user-links a:hover,
.vector-header-container .vector-menu-content a:hover {
    color:#dff7f5!important;
}
.vector-header-container .vector-icon {
    color:#ffffff!important;
}
/* =====================================
   TOP NAVIGATION
   ===================================== */
#maliki-top-navigation {
    display:block;
    width:100%;
    height:44px;
    box-sizing:border-box;
    margin:0;
    padding:0;
    background:#019d9a;
    border:0;
    position:relative;
    z-index:2000;
}
#maliki-top-navigation .maliki-nav-inner {
    width:100%;
    max-width:1200px;
    height:44px;
    margin:0 auto;
    padding:0 24px;
    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:#ffffff;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.015em;
    line-height:1.4;
    padding:0 18px;
    margin:0;
    cursor:pointer;
    white-space:nowrap;
    transition:background-color .18s ease,color .18s ease;
}
#maliki-top-navigation .maliki-nav-arrow {
    display:inline-block;
    margin-left:6px;
    font-size:9px;
    color:rgba(255,255,255,.82);
    transform:translateY(-1px);
    transition:transform .18s ease;
}
#maliki-top-navigation .maliki-nav-item:hover .maliki-nav-button,
#maliki-top-navigation .maliki-nav-item.is-open .maliki-nav-button {
    background:#006b68;
    color:#ffffff;
}
#maliki-top-navigation .maliki-nav-item:hover .maliki-nav-arrow,
#maliki-top-navigation .maliki-nav-item.is-open .maliki-nav-arrow {
    transform:rotate(180deg);
}
#maliki-top-navigation .maliki-nav-button:focus {
    outline:none;
    background:#006b68;
}
#maliki-top-navigation .maliki-nav-dropdown {
    position:absolute;
    top:100%;
    left:0;
    min-width:225px;
    padding:7px 0;
    background:#ffffff;
    border:1px solid #d8dee4;
    border-top:3px solid #006b68;
    border-radius:0 0 6px 6px;
    box-shadow:0 8px 22px rgba(0,0,0,.12);
    display:none;
    z-index:3000;
}
#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:13px;
    line-height:1.45;
    text-decoration:none;
    white-space:nowrap;
    border-left:3px solid transparent;
}
#maliki-top-navigation .maliki-nav-dropdown a:hover {
    background:#e7f5f4;
    color:#006b68;
    border-left-color:#019d9a;
    text-decoration:none;
}
/* =====================================
   HOMEPAGE CONTAINER
   ===================================== */
.me-home {
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
}
/* =====================================
   HOMEPAGE HERO
   ===================================== */
.me-home-hero {
    width:100%;
    max-width:none;
    box-sizing:border-box;
    margin:0;
    padding:0;
    background:#f7f9f9;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:hidden;
}
.me-home-hero-inner {
    width:100%;
    max-width:1080px;
    margin:0 auto;
    padding:58px 30px 46px;
    box-sizing:border-box;
    text-align:center;
}
.mw-parser-output .me-home-hero-label {
    display:block;
    margin:0 0 16px 0;
    padding:0;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#019d9a!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:11px!important;
    font-weight:700!important;
    letter-spacing:.16em!important;
    line-height:1.4!important;
    text-transform:uppercase;
}
.mw-parser-output .me-home-hero-title {
    display:block!important;
    width:100%!important;
    margin:0 auto 20px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#006b68!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:46px!important;
    font-weight:500!important;
    letter-spacing:-.012em!important;
    line-height:1.15!important;
    text-align:center!important;
}
.mw-parser-output .me-home-hero-institution {
    display:block;
    margin:0 auto 16px;
    padding:0;
    color:#24343b!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:16px!important;
    font-weight:600!important;
    line-height:1.5!important;
    text-align:center;
}
.mw-parser-output .me-home-hero-description {
    display:block;
    width:100%;
    max-width:700px;
    margin:0 auto;
    padding:0;
    color:#5b666b!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:15px!important;
    font-weight:400!important;
    line-height:1.65!important;
    text-align:center;
}
/* =====================================
   HOMEPAGE SEARCH
   ===================================== */
.mw-parser-output .me-home-search {
    display:block;
    width:100%;
    max-width:720px;
    margin:28px auto 0;
    padding:0;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
}
.mw-parser-output .me-home-search form {
    display:flex!important;
    align-items:stretch!important;
    justify-content:center!important;
    width:100%!important;
    max-width:720px!important;
    margin:0 auto!important;
    padding:0!important;
    gap:8px!important;
    box-sizing:border-box!important;
}
.mw-parser-output .me-home-search input[type="search"],
.mw-parser-output .me-home-search input[type="text"],
.mw-parser-output .me-home-search .mw-inputbox-input {
    display:block!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0 16px!important;
    border:1px solid #c4d4d2!important;
    border-radius:4px!important;
    background:#ffffff!important;
    color:#24343b!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:14px!important;
    line-height:48px!important;
    outline:none!important;
    box-shadow:none!important;
}
.mw-parser-output .me-home-search input[type="search"]::placeholder,
.mw-parser-output .me-home-search input[type="text"]::placeholder {
    color:#8a9498;
}
.mw-parser-output .me-home-search input[type="search"]:focus,
.mw-parser-output .me-home-search input[type="text"]:focus {
    border-color:#019d9a!important;
    box-shadow:0 0 0 2px rgba(1,157,154,.10)!important;
}
.mw-parser-output .me-home-search input[type="submit"],
.mw-parser-output .me-home-search .mw-inputbox-button {
    display:block!important;
    flex:0 0 170px!important;
    width:170px!important;
    min-width:170px!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0 18px!important;
    border:1px solid #019d9a!important;
    border-radius:4px!important;
    background:#019d9a!important;
    color:#ffffff!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:14px!important;
    font-weight:700!important;
    line-height:46px!important;
    text-align:center!important;
    cursor:pointer;
}
.mw-parser-output .me-home-search input[type="submit"]:hover {
    background:#006b68!important;
    border-color:#006b68!important;
}
/* =====================================
   HOMEPAGE LINKS
   ===================================== */
.mw-parser-output .me-home-hero-links {
    display:block;
    margin:20px auto 0;
    padding:0;
    color:#7a8589;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
    line-height:1.5;
    text-align:center;
}
.mw-parser-output .me-home-hero-links a {
    color:#006b68;
    font-weight:600;
    text-decoration:none;
}
.mw-parser-output .me-home-hero-links a:hover {
    color:#019d9a;
    text-decoration:underline;
}
/* =====================================
   HOMEPAGE — JELAJAH PENGETAHUAN
   ===================================== */
.me-home-section {
    width:100%;
    box-sizing:border-box;
}
.me-home-section-inner {
    width:100%;
    max-width:1120px;
    margin:0 auto;
    padding:72px 30px;
    box-sizing:border-box;
}
.me-home-section-heading {
    max-width:760px;
    margin:0 auto 42px;
    text-align:center;
}
.me-home-section-label {
    margin:0 0 10px 0;
    padding:0;
    color:#019d9a;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.16em;
    line-height:1.4;
    text-transform:uppercase;
}
.me-home-section-heading h2 {
    margin:0 0 14px 0;
    padding:0;
    color:#006b68;
    font-family:Georgia,"Times New Roman",serif;
    font-size:38px;
    font-weight:500;
    line-height:1.25;
}
.me-home-section-heading p {
    margin:0;
    padding:0;
    color:#5b666b;
    font-family:Arial,Helvetica,sans-serif;
    font-size:15px;
    line-height:1.75;
}
.me-browse-section {
    width:100%;
    background:#ffffff;
    border-top:1px solid #e4ecea;
    border-bottom:1px solid #e4ecea;
}
.me-browse-section .me-home-section-inner {
    padding-top:72px;
    padding-bottom:76px;
}
.me-browse-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.me-browse-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:245px;
    box-sizing:border-box;
    padding:27px 27px 24px;
    background:#ffffff;
    border:1px solid #d8e4e2;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(24,58,58,.04);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.me-browse-card:hover {
    transform:translateY(-3px);
    border-color:#9fd4d1;
    box-shadow:0 8px 22px rgba(24,58,58,.09);
}
.me-browse-type {
    margin:0 0 15px 0;
    padding:0;
    color:#019d9a;
    font-family:Arial,Helvetica,sans-serif;
    font-size:10px;
    font-weight:700;
    letter-spacing:.12em;
    line-height:1.4;
    text-transform:uppercase;
}
.me-browse-title {
    margin:0 0 13px 0;
    padding:0;
    color:#006b68;
    font-family:Georgia,"Times New Roman",serif;
    font-size:25px;
    font-weight:500;
    line-height:1.3;
}
.me-browse-title a {
    color:#006b68;
    text-decoration:none;
}
.me-browse-title a:hover {
    color:#019d9a;
    text-decoration:none;
}
.me-browse-description {
    flex:1 1 auto;
    margin:0;
    padding:0;
    color:#5b666b;
    font-family:Arial,Helvetica,sans-serif;
    font-size:14px;
    line-height:1.7;
}
.me-browse-link {
    margin:22px 0 0 0;
    padding:16px 0 0 0;
    border-top:1px solid #edf1f0;
    color:#019d9a;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
    font-weight:700;
    line-height:1.5;
}
.me-browse-link a {
    color:#019d9a;
    text-decoration:none;
}
.me-browse-link a:hover {
    color:#006b68;
    text-decoration:none;
}
.me-section-more {
    margin:34px 0 0 0;
    padding:0;
    text-align:center;
}
.me-section-more a {
    color:#006b68;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
}
.me-section-more a:hover {
    color:#019d9a;
    text-decoration:underline;
}
/* =====================================
   KNOWLEDGE GRID
   ===================================== */
.me-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    width:100%;
    max-width:1200px;
    margin:20px auto 45px;
    padding:0 24px;
    box-sizing:border-box;
    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;
}
/* =====================================
   ARTICLE
   ===================================== */
.me-article {
    max-width:900px;
    margin:auto;
}
.me-article-header h1 {
    font-family:Georgia,"Times New Roman",serif;
    font-size:42px;
    color:#006b68;
    border-bottom:0!important;
    padding-bottom:15px;
}
.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!important;
    padding-bottom:8px;
}
/* =====================================
   WIKIEDITOR
   ===================================== */
.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;
}
/* =====================================
   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:0 14px;
        font-size:12px;
    }
}
@media (max-width:900px) {
    #maliki-utility-bar .maliki-utility-right span:first-child {
        display:none;
    }
    .me-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .me-browse-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width:800px) {
    #maliki-utility-bar .maliki-utility-inner {
        padding:0 12px;
    }
    #maliki-utility-bar .maliki-utility-left {
        gap:16px;
    }
    #maliki-utility-bar .maliki-utility-left a {
        font-size:11px;
    }
    #maliki-top-navigation {
        overflow:visible;
    }
    #maliki-top-navigation .maliki-nav-inner {
        height:42px;
        padding:0 8px;
        justify-content:flex-start;
        overflow-x:auto;
    }
    #maliki-top-navigation .maliki-nav-button {
        padding:0 11px;
        font-size:12px;
    }
    #maliki-top-navigation .maliki-nav-dropdown {
        position:fixed;
        left:8px;
        width:calc(100vw - 16px);
        max-width:360px;
        border-radius:6px;
    }
    .mw-parser-output .me-home-search form {
        flex-direction:column!important;
        gap:8px!important;
    }
    .mw-parser-output .me-home-search input[type="search"],
    .mw-parser-output .me-home-search input[type="text"],
    .mw-parser-output .me-home-search .mw-inputbox-input,
    .mw-parser-output .me-home-search input[type="submit"],
    .mw-parser-output .me-home-search .mw-inputbox-button {
        width:100%!important;
        min-width:0!important;
        flex:none!important;
    }
}
@media (max-width:700px) {
    .me-browse-grid {
        grid-template-columns:1fr;
        gap:16px;
    }
    .me-home-section-inner {
        padding:55px 20px;
    }
    .me-home-section-heading h2 {
        font-size:32px;
    }
    .vector-header-container .vector-search-box {
        margin-left:8px;
        margin-right:8px;
    }
    .vector-header-container .mw-logo-icon {
        width:42px!important;
        height:42px!important;
    }
    .vector-header-container .mw-logo-wordmark {
        font-size:15px;
    }
    .mw-parser-output .me-home-hero-title {
        font-size:34px!important;
    }
    .me-home-hero-inner {
        padding:42px 20px 34px;
    }
}
@media (max-width:600px) {
    #maliki-utility-bar .maliki-utility-left a:nth-child(2),
    #maliki-utility-bar .maliki-utility-left a:nth-child(3) {
        display:none;
    }
    .me-grid {
        grid-template-columns:1fr;
    }
    .mw-parser-output .me-home-hero-title {
        font-size:30px!important;
    }
}
Diperoleh dari "https://ency.uin-malang.ac.id/index.php?title=MediaWiki:Common.css&oldid=1264"