MediaWiki:Common.css: Perbedaan antara revisi
ADMIN-ency (bicara | kontrib) Tidak ada ringkasan suntingan |
ADMIN-ency (bicara | kontrib) Tidak ada ringkasan suntingan |
||
| Baris 1: | Baris 1: | ||
/* ===================================== | /* ===================================== | ||
MALIKI ENCYCLOPEDIA | MALIKI ENCYCLOPEDIA | ||
Common.css | Common.css v14 | ||
Homepage + Knowledge + Header Navigation | |||
===================================== */ | Vector 2022 | ||
===================================== */ | |||
/* ========================= | |||
GLOBAL | /* ===================================== | ||
========================= */ | GLOBAL | ||
===================================== */ | |||
body { | body { | ||
| Baris 26: | Baris 28: | ||
} | } | ||
/* ========================= | |||
HOME CONTAINER | /* ===================================== | ||
========================= */ | MALIKI TOP NAVIGATION | ||
Header Navigation — Phase 1B.1 | |||
Vector 2022 | |||
===================================== */ | |||
#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; | |||
} | |||
/* ===================================== | |||
NAVIGATION INNER | |||
===================================== */ | |||
#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; | |||
} | |||
/* ===================================== | |||
NAVIGATION ITEM | |||
===================================== */ | |||
#maliki-top-navigation .maliki-nav-item { | |||
position: relative; | |||
display: flex; | |||
align-items: stretch; | |||
} | |||
/* ===================================== | |||
NAVIGATION BUTTON | |||
===================================== */ | |||
#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; | |||
} | |||
/* ===================================== | |||
NAVIGATION ARROW | |||
===================================== */ | |||
#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 | |||
===================================== */ | |||
#maliki-top-navigation | |||
.maliki-nav-item:hover | |||
.maliki-nav-button { | |||
background: #f5f8f7; | |||
color: #006b54; | |||
} | |||
#maliki-top-navigation | |||
.maliki-nav-button:focus { | |||
background: #f5f8f7; | |||
color: #006b54; | |||
outline: none; | |||
} | |||
/* ===================================== | |||
OPEN STATE | |||
===================================== */ | |||
#maliki-top-navigation | |||
.maliki-nav-item.is-open | |||
.maliki-nav-button { | |||
background: #f5f8f7; | |||
color: #006b54; | |||
} | |||
#maliki-top-navigation | |||
.maliki-nav-item:hover | |||
.maliki-nav-arrow, | |||
#maliki-top-navigation | |||
.maliki-nav-item.is-open | |||
.maliki-nav-arrow { | |||
color: #006b54; | |||
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; | |||
} | |||
/* ===================================== | |||
DROPDOWN OPEN | |||
===================================== */ | |||
#maliki-top-navigation | |||
.maliki-nav-item.is-open | |||
.maliki-nav-dropdown { | |||
display: block; | |||
} | |||
/* ===================================== | |||
DROPDOWN DESKTOP HOVER | |||
===================================== */ | |||
@media (min-width: 801px) { | |||
#maliki-top-navigation | |||
.maliki-nav-item:hover | |||
.maliki-nav-dropdown { | |||
display: block; | |||
} | |||
} | |||
/* ===================================== | |||
DROPDOWN LINK | |||
===================================== */ | |||
#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; | |||
} | |||
/* ===================================== | |||
DROPDOWN LINK HOVER | |||
===================================== */ | |||
#maliki-top-navigation | |||
.maliki-nav-dropdown a:hover { | |||
background: #f5f8f7; | |||
color: #006b54; | |||
border-left-color: #c79b2b; | |||
text-decoration: none; | |||
} | |||
/* ===================================== | |||
NAVIGATION SUBTLE SHADOW | |||
===================================== */ | |||
#maliki-top-navigation::after { | |||
content: ""; | |||
position: absolute; | |||
left: 0; | |||
right: 0; | |||
bottom: -1px; | |||
height: 1px; | |||
background: rgba(0, 0, 0, 0.03); | |||
} | |||
/* ===================================== | |||
HOME CONTAINER | |||
===================================== */ | |||
.me-home { | .me-home { | ||
| Baris 34: | Baris 320: | ||
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
/* ===================================== | /* ===================================== | ||
HERO BANNER | HERO BANNER | ||
===================================== */ | ===================================== */ | ||
.me-hero-image { | .me-hero-image { | ||
| Baris 48: | Baris 335: | ||
width: 100%; | width: 100%; | ||
height: 220px; | height: 220px; | ||
object-fit: cover; | object-fit: cover; | ||
display: block; | display: block; | ||
} | } | ||
/* ===================================== | /* ===================================== | ||
HERO CONTENT | HERO CONTENT | ||
===================================== */ | ===================================== */ | ||
.me-hero { | .me-hero { | ||
background: #f8f6ef; | background: #f8f6ef; | ||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
border-radius: 12px; | border-radius: 12px; | ||
text-align: center; | text-align: center; | ||
margin: 0 auto 45px; | margin: 0 auto 45px; | ||
padding: 25px 40px 35px; | padding: 25px 40px 35px; | ||
} | } | ||
.me-hero h1 { | .me-hero h1 { | ||
font-family: Georgia, serif; | font-family: Georgia, serif; | ||
font-size: 54px; | font-size: 54px; | ||
font-weight: normal; | font-weight: normal; | ||
color: #006b54; | color: #006b54; | ||
margin: 0 auto 15px; | margin: 0 auto 15px; | ||
padding-bottom: 10px; | padding-bottom: 10px; | ||
border-bottom: 1px solid #ccc; | border-bottom: 1px solid #ccc; | ||
max-width: 850px; | max-width: 850px; | ||
} | } | ||
.me-hero h3.tagline { | .me-hero h3.tagline { | ||
font-size: 24px; | font-size: 24px; | ||
font-weight: bold; | font-weight: bold; | ||
color: #24343b; | color: #24343b; | ||
margin: 25px 0 15px; | margin: 25px 0 15px; | ||
} | } | ||
.me-hero p { | .me-hero p { | ||
font-size: 17px; | font-size: 17px; | ||
line-height: 1.6; | line-height: 1.6; | ||
max-width: 850px; | max-width: 850px; | ||
margin: 15px auto; | margin: 15px auto; | ||
} | } | ||
/* ===================================== | /* ===================================== | ||
FEATURED GRID | FEATURED GRID | ||
Pengetahuan Pilihan | Pengetahuan Pilihan | ||
===================================== */ | ===================================== */ | ||
.featured-grid { | .featured-grid { | ||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
align-items: flex-start; | align-items: flex-start; | ||
gap: 12px; | gap: 12px; | ||
margin: 25px auto 45px; | margin: 25px auto 45px; | ||
} | } | ||
/* ===================================== | /* ===================================== | ||
FEATURED ITEM | FEATURED ITEM | ||
===================================== */ | ===================================== */ | ||
.featured-item { | .featured-item { | ||
width: 300px; | width: 300px; | ||
flex: none; | flex: none; | ||
text-align: center; | text-align: center; | ||
} | } | ||
/* ===================================== | /* ===================================== | ||
IMAGE | FEATURED IMAGE | ||
===================================== */ | |||
===================================== */ | |||
.featured-image { | .featured-image { | ||
height: 130px; | height: 130px; | ||
background: #f8f6ef; | background: #f8f6ef; | ||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
border-radius: 8px; | border-radius: 8px; | ||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
} | } | ||
.featured-image img { | .featured-image img { | ||
max-width: 120px; | max-width: 120px; | ||
max-height: 120px; | max-height: 120px; | ||
width: auto; | width: auto; | ||
height: auto; | height: auto; | ||
object-fit: contain; | object-fit: contain; | ||
} | } | ||
/* ===================================== | /* ===================================== | ||
TITLE | FEATURED TITLE | ||
===================================== */ | ===================================== */ | ||
.featured-item h3 { | .featured-item h3 { | ||
color: #006b54; | color: #006b54; | ||
font-size: 21px; | font-size: 21px; | ||
margin: 15px 0 10px; | margin: 15px 0 10px; | ||
} | } | ||
/* ===================================== | /* ===================================== | ||
DESCRIPTION | FEATURED DESCRIPTION | ||
===================================== */ | ===================================== */ | ||
.featured-item p { | .featured-item p { | ||
max-width: 240px; | max-width: 240px; | ||
margin: 0 auto; | margin: 0 auto; | ||
font-size: 14px; | font-size: 14px; | ||
line-height: 1.55; | line-height: 1.55; | ||
} | } | ||
/* ===================================== | /* ===================================== | ||
LINK | FEATURED LINK | ||
===================================== */ | ===================================== */ | ||
.featured-item a { | .featured-item a { | ||
display: inline-block; | display: inline-block; | ||
margin-top: 15px; | margin-top: 15px; | ||
color: #c79b2b; | color: #c79b2b; | ||
font-weight: bold; | font-weight: bold; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.featured-item a:hover { | .featured-item a:hover { | ||
color: #006b54; | color: #006b54; | ||
} | } | ||
/* ===================================== | /* ===================================== | ||
SECOND SECTION | SECOND SECTION | ||
===================================== */ | ===================================== */ | ||
.featured-grid + h2 { | .featured-grid + h2 { | ||
margin-top: 30px; | margin-top: 30px; | ||
} | } | ||
/* ===================================== | /* ===================================== | ||
MALIKI ARTICLE STYLE | MALIKI ARTICLE STYLE | ||
===================================== */ | ===================================== */ | ||
.me-article { | .me-article { | ||
max-width: 900px; | max-width: 900px; | ||
margin: auto; | margin: auto; | ||
} | } | ||
.me-article-header h1 { | .me-article-header h1 { | ||
font-family: Georgia, serif; | font-family: Georgia, serif; | ||
font-size: 42px; | font-size: 42px; | ||
color: #006b54; | color: #006b54; | ||
border-bottom: 1px solid #ddd; | border-bottom: 1px solid #ddd; | ||
padding-bottom: 15px; | padding-bottom: 15px; | ||
} | } | ||
.me-article-image { | .me-article-image { | ||
text-align: center; | text-align: center; | ||
margin: 25px 0; | margin: 25px 0; | ||
} | } | ||
.me-article-image img { | .me-article-image img { | ||
max-width: 350px; | max-width: 350px; | ||
height: auto; | height: auto; | ||
} | } | ||
.me-summary { | .me-summary { | ||
background: #f8f6ef; | background: #f8f6ef; | ||
border-left: 4px solid #c79b2b; | border-left: 4px solid #c79b2b; | ||
padding: 20px; | padding: 20px; | ||
margin: 30px 0; | margin: 30px 0; | ||
} | } | ||
.me-section { | .me-section { | ||
margin: 35px 0; | margin: 35px 0; | ||
} | } | ||
.me-section h2 { | .me-section h2 { | ||
color: #006b54; | color: #006b54; | ||
border-bottom: 1px solid #ddd; | border-bottom: 1px solid #ddd; | ||
padding-bottom: 8px; | padding-bottom: 8px; | ||
} | } | ||
/* ================================ | |||
NAVIGASI PENGETAHUAN | /* ===================================== | ||
================================ */ | NAVIGASI PENGETAHUAN | ||
===================================== */ | |||
.me-navigation { | .me-navigation { | ||
margin: 35px 0; | margin: 35px 0; | ||
} | } | ||
.me-navigation h2 { | .me-navigation h2 { | ||
color: #006b54; | color: #006b54; | ||
font-size: 24px; | font-size: 24px; | ||
margin-bottom: 25px; | margin-bottom: 25px; | ||
border-bottom: 1px solid #ddd; | border-bottom: 1px solid #ddd; | ||
padding-bottom: 10px; | padding-bottom: 10px; | ||
} | } | ||
.me-navigation-table { | .me-navigation-table { | ||
width: 100%; | width: 100%; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
margin-top: 20px; | margin-top: 20px; | ||
} | } | ||
.me-navigation-table th { | .me-navigation-table th { | ||
width: 180px; | width: 180px; | ||
text-align: left; | text-align: left; | ||
background: #f5f3eb; | background: #f5f3eb; | ||
padding: 12px; | padding: 12px; | ||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
.me-navigation-table td { | .me-navigation-table td { | ||
padding: 12px; | padding: 12px; | ||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
} | } | ||
.me-navigation-table a { | .me-navigation-table a { | ||
color: #1f5f8b; | color: #1f5f8b; | ||
} | } | ||
.me-navigation-table a:hover { | .me-navigation-table a:hover { | ||
color: #006b54; | color: #006b54; | ||
} | } | ||
.me-knowledge-navigation { | .me-knowledge-navigation { | ||
margin-top: 35px; | margin-top: 35px; | ||
margin-bottom: 35px; | margin-bottom: 35px; | ||
} | } | ||
/* ===================================== | /* ===================================== | ||
JELAJAH PENGETAHUAN | JELAJAH PENGETAHUAN | ||
===================================== */ | ===================================== */ | ||
.me-grid { | .me-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
grid-template-columns: | |||
repeat(3, minmax(0, 1fr)); | |||
gap: 20px; | gap: 20px; | ||
width: 100%; | width: 100%; | ||
margin: 20px 0 35px; | margin: 20px 0 35px; | ||
align-items: stretch; | align-items: stretch; | ||
} | } | ||
.me-card { | .me-card { | ||
border: 1px solid #d9e2df; | border: 1px solid #d9e2df; | ||
background: #fff; | background: #fff; | ||
padding: 16px; | padding: 16px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
border-radius: 10px; | border-radius: 10px; | ||
box-shadow: 0 2px 6px rgba(0,0,0,0.05); | |||
box-shadow: | |||
0 2px 6px rgba(0,0,0,0.05); | |||
width: 100%; | width: 100%; | ||
min-width: 0; | min-width: 0; | ||
} | } | ||
.me-card img { | .me-card img { | ||
width: 100%; | width: 100%; | ||
max-width: 250px; | max-width: 250px; | ||
height: 180px; | height: 180px; | ||
object-fit: contain; | object-fit: contain; | ||
display: block; | display: block; | ||
margin: 0 auto 14px; | margin: 0 auto 14px; | ||
} | } | ||
.me-card a { | .me-card a { | ||
color: #006b54; | color: #006b54; | ||
text-decoration: none; | text-decoration: none; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
.me-card a:hover { | .me-card a:hover { | ||
color: #c79b2b; | color: #c79b2b; | ||
} | } | ||
/* ===================================== | /* ===================================== | ||
RESPONSIVE ( | RESPONSIVE | ||
===================================== */ | Navigation | ||
===================================== */ | |||
@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; | |||
} | |||
} | |||
/* ===================================== | |||
RESPONSIVE | |||
Homepage | |||
===================================== */ | |||
@media (max-width: 900px) { | @media (max-width: 900px) { | ||
.featured-grid { | .featured-grid { | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
} | } | ||
.me-grid { | .me-grid { | ||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
grid-template-columns: | |||
repeat(2, minmax(0, 1fr)); | |||
} | } | ||
} | } | ||
/* ===================================== | |||
RESPONSIVE | |||
Navigation Mobile | |||
===================================== */ | |||
@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); | |||
} | |||
} | |||
/* ===================================== | |||
RESPONSIVE | |||
Homepage Mobile | |||
===================================== */ | |||
@media (max-width: 700px) { | @media (max-width: 700px) { | ||
.me-hero { | .me-hero { | ||
padding: 20px; | padding: 20px; | ||
} | } | ||
.me-hero h1 { | .me-hero h1 { | ||
font-size: 36px; | font-size: 36px; | ||
} | } | ||
.me-hero h3.tagline { | .me-hero h3.tagline { | ||
font-size: 20px; | font-size: 20px; | ||
} | } | ||
.me-hero-image img { | .me-hero-image img { | ||
height: 160px; | height: 160px; | ||
} | } | ||
.featured-item { | .featured-item { | ||
width: 100%; | width: 100%; | ||
} | } | ||
} | } | ||
/* ===================================== | |||
RESPONSIVE | |||
Small Mobile | |||
===================================== */ | |||
@media (max-width: 600px) { | @media (max-width: 600px) { | ||
.me-grid { | .me-grid { | ||
grid-template-columns: 1fr; | 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); | |||
} | |||
} | } | ||
/* ========================================= | /* ========================================= | ||
Maliki Encyclopedia | Maliki Encyclopedia | ||
WikiEditor | WikiEditor — Isi Artikel | ||
========================================= */ | ========================================= */ | ||
| Baris 367: | Baris 952: | ||
.me-free-text textarea, | .me-free-text textarea, | ||
.wikiEditor-ui-text, | .wikiEditor-ui-text, | ||
.wikiEditor-ui- | .wikiEditor-ui-textarea { | ||
width: 100% !important; | width: 100% !important; | ||
max-width: none !important; | max-width: none !important; | ||
box-sizing: border-box !important; | box-sizing: border-box !important; | ||
} | } | ||
.wikiEditor-ui { | .wikiEditor-ui { | ||
width: 100% !important; | width: 100% !important; | ||
max-width: none !important; | max-width: none !important; | ||
} | } | ||
.wikiEditor-ui-text { | .wikiEditor-ui-text { | ||
width: 100% !important; | width: 100% !important; | ||
} | } | ||
.wikiEditor-ui-text textarea { | .wikiEditor-ui-text textarea { | ||
width: 100% !important; | width: 100% !important; | ||
max-width: none !important; | max-width: none !important; | ||
box-sizing: border-box !important; | box-sizing: border-box !important; | ||
} | } | ||
/* ========================================= | /* ========================================= | ||
FLAGGEDREVS | FLAGGEDREVS | ||
Sembunyikan Review Form | |||
Sementara sampai extension dinonaktifkan | Sementara sampai extension dinonaktifkan | ||
========================================= */ | ========================================= */ | ||
#mw-fr-reviewform { | #mw-fr-reviewform { | ||
display: none !important; | display: none !important; | ||
} | } | ||
Revisi per 27 September 2026 07.04
/* =====================================
MALIKI ENCYCLOPEDIA
Common.css v14
Homepage + Knowledge + Header Navigation
Vector 2022
===================================== */
/* =====================================
GLOBAL
===================================== */
body {
background: #f5f8f7;
color: #24343b;
}
.firstHeading {
color: #004f40;
}
a {
color: #1f5f8b;
}
a:hover {
color: #006b54;
}
/* =====================================
MALIKI TOP NAVIGATION
Header Navigation — Phase 1B.1
Vector 2022
===================================== */
#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;
}
/* =====================================
NAVIGATION INNER
===================================== */
#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;
}
/* =====================================
NAVIGATION ITEM
===================================== */
#maliki-top-navigation .maliki-nav-item {
position: relative;
display: flex;
align-items: stretch;
}
/* =====================================
NAVIGATION BUTTON
===================================== */
#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;
}
/* =====================================
NAVIGATION ARROW
===================================== */
#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
===================================== */
#maliki-top-navigation
.maliki-nav-item:hover
.maliki-nav-button {
background: #f5f8f7;
color: #006b54;
}
#maliki-top-navigation
.maliki-nav-button:focus {
background: #f5f8f7;
color: #006b54;
outline: none;
}
/* =====================================
OPEN STATE
===================================== */
#maliki-top-navigation
.maliki-nav-item.is-open
.maliki-nav-button {
background: #f5f8f7;
color: #006b54;
}
#maliki-top-navigation
.maliki-nav-item:hover
.maliki-nav-arrow,
#maliki-top-navigation
.maliki-nav-item.is-open
.maliki-nav-arrow {
color: #006b54;
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;
}
/* =====================================
DROPDOWN OPEN
===================================== */
#maliki-top-navigation
.maliki-nav-item.is-open
.maliki-nav-dropdown {
display: block;
}
/* =====================================
DROPDOWN DESKTOP HOVER
===================================== */
@media (min-width: 801px) {
#maliki-top-navigation
.maliki-nav-item:hover
.maliki-nav-dropdown {
display: block;
}
}
/* =====================================
DROPDOWN LINK
===================================== */
#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;
}
/* =====================================
DROPDOWN LINK HOVER
===================================== */
#maliki-top-navigation
.maliki-nav-dropdown a:hover {
background: #f5f8f7;
color: #006b54;
border-left-color: #c79b2b;
text-decoration: none;
}
/* =====================================
NAVIGATION SUBTLE SHADOW
===================================== */
#maliki-top-navigation::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: rgba(0, 0, 0, 0.03);
}
/* =====================================
HOME CONTAINER
===================================== */
.me-home {
max-width: 1200px;
margin: 0 auto;
}
/* =====================================
HERO BANNER
===================================== */
.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;
}
/* =====================================
HERO CONTENT
===================================== */
.me-hero {
background: #f8f6ef;
border: 1px solid #ddd;
border-radius: 12px;
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: #006b54;
margin: 0 auto 15px;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
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
Pengetahuan Pilihan
===================================== */
.featured-grid {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 12px;
margin: 25px auto 45px;
}
/* =====================================
FEATURED ITEM
===================================== */
.featured-item {
width: 300px;
flex: none;
text-align: center;
}
/* =====================================
FEATURED IMAGE
===================================== */
.featured-image {
height: 130px;
background: #f8f6ef;
border: 1px solid #ddd;
border-radius: 8px;
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 TITLE
===================================== */
.featured-item h3 {
color: #006b54;
font-size: 21px;
margin: 15px 0 10px;
}
/* =====================================
FEATURED DESCRIPTION
===================================== */
.featured-item p {
max-width: 240px;
margin: 0 auto;
font-size: 14px;
line-height: 1.55;
}
/* =====================================
FEATURED LINK
===================================== */
.featured-item a {
display: inline-block;
margin-top: 15px;
color: #c79b2b;
font-weight: bold;
text-decoration: none;
}
.featured-item a:hover {
color: #006b54;
}
/* =====================================
SECOND SECTION
===================================== */
.featured-grid + h2 {
margin-top: 30px;
}
/* =====================================
MALIKI ARTICLE STYLE
===================================== */
.me-article {
max-width: 900px;
margin: auto;
}
.me-article-header h1 {
font-family: Georgia, serif;
font-size: 42px;
color: #006b54;
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
}
.me-article-image {
text-align: center;
margin: 25px 0;
}
.me-article-image img {
max-width: 350px;
height: auto;
}
.me-summary {
background: #f8f6ef;
border-left: 4px solid #c79b2b;
padding: 20px;
margin: 30px 0;
}
.me-section {
margin: 35px 0;
}
.me-section h2 {
color: #006b54;
border-bottom: 1px solid #ddd;
padding-bottom: 8px;
}
/* =====================================
NAVIGASI PENGETAHUAN
===================================== */
.me-navigation {
margin: 35px 0;
}
.me-navigation h2 {
color: #006b54;
font-size: 24px;
margin-bottom: 25px;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.me-navigation-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.me-navigation-table th {
width: 180px;
text-align: left;
background: #f5f3eb;
padding: 12px;
border: 1px solid #ddd;
font-weight: bold;
}
.me-navigation-table td {
padding: 12px;
border: 1px solid #ddd;
}
.me-navigation-table a {
color: #1f5f8b;
}
.me-navigation-table a:hover {
color: #006b54;
}
.me-knowledge-navigation {
margin-top: 35px;
margin-bottom: 35px;
}
/* =====================================
JELAJAH PENGETAHUAN
===================================== */
.me-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 20px;
width: 100%;
margin: 20px 0 35px;
align-items: stretch;
}
.me-card {
border: 1px solid #d9e2df;
background: #fff;
padding: 16px;
box-sizing: border-box;
border-radius: 10px;
box-shadow:
0 2px 6px rgba(0,0,0,0.05);
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: #006b54;
text-decoration: none;
font-weight: bold;
}
.me-card a:hover {
color: #c79b2b;
}
/* =====================================
RESPONSIVE
Navigation
===================================== */
@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;
}
}
/* =====================================
RESPONSIVE
Homepage
===================================== */
@media (max-width: 900px) {
.featured-grid {
flex-wrap: wrap;
}
.me-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
/* =====================================
RESPONSIVE
Navigation Mobile
===================================== */
@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);
}
}
/* =====================================
RESPONSIVE
Homepage Mobile
===================================== */
@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%;
}
}
/* =====================================
RESPONSIVE
Small Mobile
===================================== */
@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);
}
}
/* =========================================
Maliki Encyclopedia
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
Sembunyikan Review Form
Sementara sampai extension dinonaktifkan
========================================= */
#mw-fr-reviewform {
display: none !important;
}