Tags: Mobile edit Mobile web edit |
Tags: Mobile edit Mobile web edit |
| Line 95: |
Line 95: |
| margin-top: 0 !important; | | margin-top: 0 !important; |
| padding-top: 0.5em !important; | | padding-top: 0.5em !important; |
| }
| |
|
| |
| /* ====== INFOBOX STYLE ====== */
| |
|
| |
| .infobox {
| |
| border: 1px solid #a2a9b1;
| |
| border-collapse: collapse;
| |
| background-color: #f8f9fa;
| |
| color: #000;
| |
| margin: 1em 0 1em 1em;
| |
| padding: 0;
| |
| width: 100%;
| |
| max-width: 330px; /* biar mobile rapi */
| |
| float: right;
| |
| clear: right;
| |
| font-size: 65%;/* ukuran HP */
| |
| }
| |
|
| |
| /* HEADER ATAS (TITLE) */
| |
| /* Warna biru muda + teks rata tengah */
| |
| .infobox-title, .infobox .infobox-above {
| |
| background: #cedff2;
| |
| text-align: center;
| |
| font-size: 120%;
| |
| font-weight: bold;
| |
| padding: 8px;
| |
| border-bottom: 1px solid #a2a9b1;
| |
| }
| |
|
| |
| /* ====== GARIS SETIAP BARIS ====== */
| |
| .infobox td, .infobox th {
| |
| border-top: 1px solid #a2a9b1 !important;
| |
| padding: 6px;
| |
| }
| |
|
| |
| /* LABEL KIRI */
| |
| .infobox-label {
| |
| font-weight: bold;
| |
| width: 40%;
| |
| vertical-align: top;
| |
| }
| |
|
| |
| /* Data infobox rata tengah */
| |
| .infobox-label {
| |
| text-align: center !important;
| |
| }
| |
|
| |
| /* DATA KANAN */
| |
| .infobox-data {
| |
| width: 50%;
| |
| }
| |
|
| |
| /* Data infobox rata tengah */
| |
| .infobox-data {
| |
| text-align: center !important;
| |
| }
| |
|
| |
| /* BAGIAN HEADING DALAM (seperti “Informasi latar belakang”) */
| |
| .infobox-header, .infobox-subheader {
| |
| background: #e2e6ea;
| |
| font-weight: bold;
| |
| text-align: center;
| |
| padding: 6px;
| |
| border-top: 1px solid #a2a9b1;
| |
| border-bottom: 1px solid #a2a9b1;
| |
| }
| |
|
| |
| /* GAMBAR */
| |
| .infobox img {
| |
| width: 100%;
| |
| height: auto;
| |
| display: block;
| |
| }
| |
|
| |
| /* MOBILE FIX */
| |
| @media screen and (max-width: 600px) {
| |
| .infobox {
| |
| float: none;
| |
| margin: 0 auto 1em;
| |
| width: 100%;
| |
| }
| |
| }
| |
|
| |
| /* ============================================
| |
| FIX #1 — HEADER BIRU TIDAK RATA TENGAH
| |
| ============================================ */
| |
| .infobox-title,
| |
| .infobox .infobox-above {
| |
| text-align: center !important; /* paksa center */
| |
| font-size: 100% !important; /* biar besar seperti Wikipedia mobile */
| |
| }
| |
|
| |
| /* ============================================
| |
| FIX #2 — INFOBOX TERLALU KECIL DI HP
| |
| BIKIN LEBARNYA 100% SEPERTI DI WIKIPEDIA MOBILE
| |
| ============================================ */
| |
| @media screen and (max-width: 600px) {
| |
| .infobox {
| |
| width: 100% !important; /* full width */
| |
| max-width: 100% !important; /* hilangin batas 330px */
| |
| margin: 0 auto 1em !important;
| |
| float: none !important; /* biar tidak mengecil ke kanan */
| |
| font-size: 100% !important; /* otomatis sesuai layar */
| |
| }
| |
|
| |
| /* gambar jangan mepet kiri-kanan */
| |
| .infobox img {
| |
| width: 100% !important;
| |
| height: auto !important;
| |
| }
| |
| }
| |
|
| |
| /* ============================================
| |
| FIX #3 — JARAK ANTAR BORDER TERLALU BESAR
| |
| ============================================ */
| |
| .infobox td, .infobox th {
| |
| padding: 8px 10px !important;
| |
| } | | } |
