/* ===== TIC stylesheet v24 | 2026-09-04 ===== */ /* ========================================================================== TAKENGON INTERNATIONAL CONFERENCE (TIC) — Custom Stylesheet Tata letak mengikuti TA'DIB (rumahjurnal.iaintakengonaceh.ac.id/index.php/tdb) Warna: hijau — putih — kuning, diambil dari logo TIC OJS 3.x, Tema Default Pasang di: Settings > Website > Appearance > Theme > Journal style sheet ========================================================================== */ :root{ --tic-green:#12903c; --tic-green-dark:#0a6b2c; --tic-green-light:#4cbf6a; --tic-green-pale:#eef8f1; --tic-yellow:#f7c815; --tic-yellow-dark:#dba800; --tic-ink:#222c26; --tic-muted:#5d6b61; --tic-line:#d9e3db; --tic-bar:#eef1ef; /* abu-abu bar judul bagian */ --tic-bg:#f2f5f3; --tic-sidebar:300px; /* lebar kolom kanan (menu sidebar) */ --tic-pad:18px; /* jarak isi jurnal dari tepi kiri halaman */ } /* ---------- DASAR ---------- */ body{ background:var(--tic-bg); color:var(--tic-ink); font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; font-size:14px; line-height:1.6; } a{color:var(--tic-green);text-decoration:none;} a:hover,a:focus{color:var(--tic-green-dark);text-decoration:underline;} .pkp_structure_page{ max-width:1180px; margin:0 auto; background:#fff; /* Tanpa bingkai. Sejak tepi kiri isi dibuat rata dengan header dan footer, garis bingkai ini menempel di teks dan terbaca seperti garis pembatas. Halaman tetap terlihat sebagai kartu putih karena latar body-nya abu-abu muda. Ingin bingkainya kembali? Ganti baris di bawah jadi: border:1px solid var(--tic-line); */ border:0; } /* ---------- HEADER (banner satu gambar, 1180x200) ---------- */ .pkp_structure_head{background:#fff;padding:0;overflow:visible;border:0;} .pkp_head_wrapper{padding:0 !important;} .pkp_site_name_wrapper,.pkp_site_name{float:none !important;clear:both;} .pkp_site_name{padding:0;margin:0;min-height:0;overflow:visible;line-height:0;} .pkp_head_wrapper .pkp_site_name, .pkp_head_wrapper .pkp_site_name > a, .pkp_head_wrapper .pkp_site_name .is_img, .pkp_head_wrapper .pkp_site_name .is_img a{ display:block !important;width:100% !important;max-width:100% !important; float:none !important;margin:0 !important; } .pkp_head_wrapper .pkp_site_name img{ display:block !important;width:100% !important;max-width:100% !important; height:auto !important;max-height:none !important; } /* Kalau judul masih berupa teks, bukan gambar */ .pkp_site_name a:not(:has(img)){ display:inline-block;padding:20px 18px;line-height:1.35; color:var(--tic-green-dark) !important;font-size:24px;font-weight:700; } /* Baris Register/Login DISEMBUNYIKAN — keduanya dipindah ke menu utama, di sebelah "About" (lihat panduan Langkah 6). */ .pkp_navigation_user_wrapper, .pkp_navigation_user{display:none !important;} /* Register & Login di menu utama dibedakan: teks hijau tebal, bukan tombol */ .pkp_navigation_primary > li > a[href*="/login"], .pkp_navigation_primary > li > a[href*="/register"]{ color:var(--tic-green) !important; } /* ---------- MENU UTAMA (bar terang, seperti TA'DIB) ---------- */ .pkp_navigation_primary_row{ background:var(--tic-bar); border-top:3px solid var(--tic-green); border-bottom:1px solid var(--tic-line); margin:0 !important;padding:0 12px !important; width:100%;max-width:100%;clear:both;overflow:visible; } .pkp_navigation_primary > li > a{ color:var(--tic-green-dark) !important; font-weight:700;font-size:11.5px; text-transform:uppercase;letter-spacing:.7px; padding:10px 13px; } .pkp_navigation_primary > li > a:hover, .pkp_navigation_primary > li > a:focus, .pkp_navigation_primary > li.in_focus > a{ background:var(--tic-green);color:#fff !important; } .pkp_navigation_primary ul li a{color:var(--tic-ink) !important;} .pkp_navigation_primary ul li a:hover{background:var(--tic-green-pale);} .pkp_search .search_prompt{color:var(--tic-green-dark) !important;font-weight:700;} /* ---------- KONTEN ---------- */ .pkp_structure_main{padding:20px 22px;} /* --- JARAK ATAS, TEPI KIRI & KOLOM KANAN ---------------------------- Tema bawaan menumpuk empat jarak di atas isi (30+40+20+30 = 120px). Semuanya dinolkan; yang tersisa hanya padding-atas .pkp_structure_main. Tepi kiri: padding kiri dibuat 0 supaya isi lurus dengan banner header dan blok footer. Kanan: disisakan selebar --tic-sidebar (300px) untuk blok menu, dengan garis abu-abu tipis sebagai pemisah. Ruang itu kosong selama blok sidebar belum diaktifkan; begitu diaktifkan, menunya langsung mengisi tanpa perlu mengubah CSS lagi. Penyetelan: - isi ingin lebih turun -> besarkan 20px pada padding di bawah - kolom kanan lebih lebar -> ubah --tic-sidebar di bagian :root - garis pemisah tak diinginkan -> hapus baris border-right -------------------------------------------------------------------- */ .pkp_structure_content{padding-top:0;} /* Baris atas kolom kiri disejajarkan dengan judul blok pertama di sidebar. Tema memberi .homepage_about padding-top 30px lalu menarik judulnya naik 10px, sisanya 20px lebih rendah dari sidebar. Selektor di bawah sengaja memakai .pkp_page_index agar cukup spesifik untuk mengalahkan aturan tema. */ .pkp_page_index .homepage_about{padding-top:0;} .pkp_page_index .homepage_about > h2{margin-top:0;} /* Blok Additional Content diperlakukan sama. Tema memberinya margin negatif dan padding sendiri, sehingga kalau isi About dipindahkan ke kolom itu, lebarnya tidak sejajar dengan bagian lain di beranda. */ .page_index_journal .additional_content{ margin-left:0; margin-right:0; padding:0; } .page_index_journal .additional_content > h2:first-child{margin-top:0;} @media (min-width:992px){ /* Garis tepi kanan halaman. Tema sudah menggambar dua garis sendiri lewat elemen bayangan pada kolom isi: satu di tepi kiri, satu di batas dengan sidebar, keduanya setinggi penuh. Yang belum ada hanya garis di tepi kanan, dan itu ditambahkan di sini. Warnanya #ddd mengikuti dua garis bawaan tadi supaya ketiganya sama persis. */ .pkp_structure_content{ border-right:1px solid #ddd; } .pkp_structure_content .pkp_structure_main, .pkp_structure_content:not(:has(.pkp_structure_sidebar)) .pkp_structure_main{ box-sizing:border-box; float:left; width:calc(100% - var(--tic-sidebar)); max-width:none; margin:0; padding:20px 22px 30px var(--tic-pad); /* Tanpa border-right. Garis pemisahnya sudah digambar tema lewat .pkp_structure_main::after. Kalau border ini dipasang juga, garisnya menjadi dua, berjarak satu piksel. */ border-right:0; } /* Menu sidebar: tidak menempel garis pemisah di kiri, dan jarak ke tepi kanan halaman dibuat sama dengan jarak isi jurnal ke tepi kiri (sama-sama 28px terukur), supaya kedua sisi halaman seimbang. */ .pkp_structure_sidebar{ box-sizing:border-box; width:var(--tic-sidebar); padding:20px var(--tic-pad) 30px 22px; } } /* --- URUTAN BERANDA -------------------------------------------------- OJS secara bawaan menaruh Homepage Image di ATAS deskripsi. Di sini urutannya dipaksa jadi: 1. About the Journal (field Journal Summary) 2. Indexed By (field Homepage Image = strip logo indexing) 3. Announcements 4. Current Issue -------------------------------------------------------------------- */ /* Wadahnya adalah .page_index_journal itu sendiri, bukan .pkp_structure_main. Selektor lama tidak pernah cocok, sehingga pengurutan di bawah ini selama ini tidak berjalan dan OJS menampilkan Announcements lebih dulu daripada Additional Content. */ .page_index_journal{display:flex;flex-direction:column;} .page_index_journal .homepage_about{order:1;} .page_index_journal .homepage_image{order:2;} .page_index_journal .additional_content{order:3;} .page_index_journal .cmp_announcements, .page_index_journal .homepage_announcements{order:4;} .page_index_journal .current_issue, .page_index_journal .obj_issue_toc{order:5;} /* Judul "INDEXED BY" ditambahkan otomatis di atas strip logo */ .page_index_journal .homepage_image{margin:0 0 20px;} .page_index_journal .homepage_image:before{ content:"Indexed By"; display:block; background:var(--tic-bar); border-left:5px solid var(--tic-green); border-bottom:1px solid var(--tic-line); font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px; color:var(--tic-green-dark); padding:8px 12px;margin:0 0 12px; } .page_index_journal .homepage_image img{ display:block;width:100%;height:auto; border:1px solid var(--tic-line); border-top:3px solid var(--tic-yellow); padding:10px;background:#fff; } /* Bar judul bagian: "ABOUT THE JOURNAL", "CURRENT ISSUE" */ h1,h2,h3,h4{color:var(--tic-green-dark);font-weight:700;} .page_index_journal h2, .obj_issue_toc > h2, .homepage_about h2, .tic-head{ background:var(--tic-bar); border-left:5px solid var(--tic-green); border-bottom:1px solid var(--tic-line); font-size:14px; text-transform:uppercase; letter-spacing:1px; color:var(--tic-green-dark); padding:8px 12px; margin:0 0 14px; } /* --- PERBAIKAN: anchor kosong bawaan OJS ---------------------------- OJS menyisipkan sebagai elemen PERTAMA di dalam .homepage_about. Aturan lama ":first-child" mengenai anchor kosong ini, sehingga muncul kotak garis putus-putus kecil melayang di atas judul. Anchor itu sekarang disembunyikan, dan kotak identitas sepenuhnya ditangani oleh class .tic-idbox di HTML. -------------------------------------------------------------------- */ .homepage_about > a[id]:empty{display:none;} .homepage_about strong{color:var(--tic-green-dark);} /* --- Kotak identitas bernomor, garis putus-putus (gaya ICSSHI) --- Ingin garisnya utuh, bukan putus-putus? Ganti "dashed" jadi "solid" pada baris border di bawah ini. */ .tic-idbox{ border:1px dashed var(--tic-green); padding:14px 18px 14px 8px; margin:0 0 18px; /* overflow:hidden membuat kotak ini berhenti sebelum gambar sampul yang mengambang di kanan, bukan melintas di belakangnya. */ overflow:hidden; } .tic-idbox ol{margin:0;padding-left:28px;} .tic-idbox li{margin:4px 0;font-size:13.5px;line-height:1.5;} .tic-idbox li strong{color:var(--tic-green-dark);} /* Label kartu identitas diberi lebar tetap supaya tanda titik dua di tiap baris berdiri sejajar. Diatur di sini, bukan di isi halaman, karena kolom Journal Summary tidak punya tombol source code sehingga HTML tidak bisa ditempel ke sana. Kalau ada label baru yang lebih panjang dari "Proceeding Title" dan titik duanya terdorong, besarkan angka 135px di bawah. */ .tic-idbox li > strong:first-child{ display:inline-block; width:135px; } .tic-idbox li a{text-decoration:underline;} /* --- Tabel identitas prosiding (label : nilai) --- */ .tic-info{ width:100%;border-collapse:collapse;margin:0 0 16px;font-size:13.5px; } .tic-info td{padding:4px 8px 4px 0;vertical-align:top;} .tic-info td:first-child{ width:150px;color:var(--tic-green-dark);font-weight:700;white-space:nowrap; } .tic-info td:first-child:after{content:":";float:right;padding-right:8px;} .tic-cover{float:right;margin:0 0 14px 20px;max-width:190px;} .tic-cover img{width:100%;height:auto;border:1px solid var(--tic-line);} /* --- Kotak INDEX OF --- */ .tic-index{ border:1px solid var(--tic-line); border-top:3px solid var(--tic-yellow); padding:12px;margin:0 0 18px;clear:both; } .tic-index-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;} .tic-index-row img{ height:36px;width:auto;border:1px solid var(--tic-line); padding:5px 9px;background:#fff;transition:.15s; } .tic-index-row img:hover{border-color:var(--tic-green);transform:translateY(-2px);} /* --- Kotak Call for Papers --- */ .tic-cfp{ border:1px solid var(--tic-line); border-left:5px solid var(--tic-yellow); background:var(--tic-green-pale); padding:12px 14px;margin:0 0 18px;font-size:13.5px; } .tic-cfp h4{margin:0 0 4px;font-size:14px;color:var(--tic-green-dark);} .tic-cfp .date{color:var(--tic-muted);font-size:12px;} .tic-cfp ul{margin:8px 0 0;padding-left:18px;} /* --- ANNOUNCEMENT TUNGGAL DI BERANDA -------------------------------- Tema memberi announcement pertama lebar 65% dan menyisakan 35% di kanan untuk announcement berikutnya. Selama baru ada satu, sisa itu tampak sebagai kotak kosong. Aturan di bawah membuatnya melebar penuh HANYA ketika announcement-nya memang cuma satu. Begitu ada announcement kedua, aturan ini berhenti berlaku sendiri dan tata letak dua kolom bawaan tema kembali. -------------------------------------------------------------------- */ .pkp_page_index .cmp_announcements > .obj_announcement_summary:only-of-type{ float:none; width:100%; padding-left:0; padding-right:0; } /* Blok announcement bawaan tema memakai margin negatif (0 -30px) supaya melebar keluar kolom, lalu dinetralkan oleh padding 30px di dalamnya. Karena padding itu dinolkan di aturan atas agar rata kiri, margin negatifnya ikut dinolkan di sini. Tanpa ini, blok announcement menjorok 30px keluar di kiri dan kanan sampai melewati garis pemisah kolom sidebar. Garis atas dan bawahnya juga dihapus, tidak diperlukan lagi karena judul "ANNOUNCEMENTS" sudah ditampilkan sebagai bar. */ .pkp_page_index .cmp_announcements{ margin-left:0; margin-right:0; /* Jarak ke bagian di atasnya. Tanpa ini bar ANNOUNCEMENTS menempel persis di paragraf terakhir About the Journal. */ margin-top:26px; border-top:0; border-bottom:0; } /* Tema memberi announcement pertama padding-top 30px, yang menumpuk di atas jarak 14px bawaan bar judul sehingga totalnya 44px. Akibatnya jarak bar ke isi di Announcements dua kali lipat dibanding di About. Padding itu dinolkan supaya keduanya sama-sama 14px. */ .pkp_page_index .cmp_announcements > .obj_announcement_summary:first-of-type{ padding-top:0; } /* Dua garis vertikal tipis yang digambar tema lewat pseudo-element: satu di tepi kanan announcement, satu di tepi kiri kolom .more. Keduanya penanda pembagian 65/35 yang tidak terpakai saat announcement-nya cuma satu. */ .pkp_page_index .cmp_announcements > .obj_announcement_summary::before, .pkp_page_index .cmp_announcements .more::before{ display:none; } /* Kolom .more punya padding atas-bawah meski isinya kosong, sehingga menyisakan strip kosong di bawah. Disembunyikan selama tidak berisi elemen apa pun; muncul lagi sendiri kalau nanti terisi. */ .pkp_page_index .cmp_announcements .more:not(:has(*)){ display:none; } /* Tema menyembunyikan judul "ANNOUNCEMENTS" (hanya terbaca screen reader) dan menggantinya dengan garis atas-bawah. Di sini judulnya dimunculkan kembali supaya seragam dengan ABOUT THE JOURNAL dan CURRENT ISSUE, yang gayanya sudah diatur di bagian bar judul. */ .pkp_page_index .cmp_announcements h2{ position:static !important; clip:auto; left:auto; width:auto; height:auto; overflow:visible; white-space:normal; } /* ---------- CURRENT ISSUE & ARTIKEL ---------- */ .obj_issue_toc .heading{border-bottom:1px solid var(--tic-line);padding-bottom:10px;} .obj_issue_toc .cover img{border:1px solid var(--tic-line);} .obj_issue_toc h2 a{color:var(--tic-green-dark);} .obj_article_summary{ border-bottom:1px solid var(--tic-line); padding:12px 0;margin:0;background:#fff; } .obj_article_summary:last-child{border-bottom:0;} .obj_article_summary > h3{ font-size:13.5px;margin:0 0 5px;line-height:1.45;text-transform:uppercase; } .obj_article_summary > h3 a{color:var(--tic-green-dark);} .obj_article_summary .authors{color:var(--tic-muted);font-size:12.5px;} .obj_article_summary .pages{color:var(--tic-muted);font-size:12.5px;} .obj_article_summary .galleys_links{margin-top:6px;} .obj_article_summary .galleys_links a{ background:var(--tic-green);color:#fff !important; border:0;border-radius:2px; font-size:11px;font-weight:700;letter-spacing:.4px; padding:4px 11px;margin-right:5px;text-decoration:none; } .obj_article_summary .galleys_links a:hover{ background:var(--tic-yellow);color:#3a2c00 !important; } /* ---------- SIDEBAR (tombol bertumpuk, seperti TA'DIB) ---------- */ /* Jarak sidebar diatur di bagian "JARAK ATAS, TEPI KIRI & KOLOM KANAN" */ .pkp_block{border:0;background:none;padding:0;margin:0 0 20px;} /* Judul bagian: teks hijau bergaris kuning, bukan bar penuh */ /* Berlaku untuk judul blok bawaan (INFORMATION) maupun judul yang ditulis sendiri di isi blok memakai class tic-title. display:inline-block membuat garis bawahnya mengikuti lebar tulisan, bukan memanjang penuh selebar sidebar. Panjang garis diatur lewat padding-right (26px). */ .pkp_block .title, .pkp_block .tic-title{ display:inline-block; background:none; color:var(--tic-green-dark); font-size:12.5px;font-weight:700; text-transform:uppercase;letter-spacing:1px; text-align:left;padding:0 26px 5px 0;margin:0 0 10px; border:0;border-bottom:3px solid var(--tic-yellow); } .pkp_block .content{padding:0;} .pkp_block ul{list-style:none;margin:0;padding:0;} .pkp_block ul li{border:0;margin:0 0 4px;} .pkp_block ul li a{ display:block; background:var(--tic-green); color:#fff !important; font-size:12.5px;font-weight:600; padding:7px 11px; border-radius:2px; text-decoration:none; transition:.15s; } .pkp_block ul li a:hover{ background:var(--tic-yellow);color:#3a2c00 !important;text-decoration:none; } .pkp_block img{max-width:100%;height:auto;} /* --- JUDUL TOMBOL PIL + KOTAK SUDUT TERPOTONG ----------------------- Dipakai di dalam blok sidebar. Judulnya ditulis sebagai elemen biasa di isi blok, bukan sebagai nama blok, supaya bentuknya bisa diatur. Penyetelan: - lengkung tombol -> border-radius pada .tic-btn - besar potongan sudut -> --notch pada .tic-card (dan angka 15px pada .tic-card a, isi dengan --notch dikurangi 1) -------------------------------------------------------------------- */ .pkp_block .tic-btn{ background:var(--tic-green); color:#fff; font-size:13px; font-weight:700; letter-spacing:.3px; text-align:center; padding:9px 14px; border-radius:20px; margin:0 0 12px; } .pkp_block .tic-card{ --notch:16px; background:#c7d2c9; /* warna garis tepi kotak */ padding:1px; /* tebal garis tepi */ margin:0 0 18px; clip-path:polygon( 0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)) ); } .pkp_block .tic-card > a{ display:flex; align-items:center; gap:11px; background:#fff; color:#111 !important; /* teks di dalam kotak: hitam */ padding:15px 13px; font-size:15px; font-weight:600; line-height:1.25; text-decoration:none !important; clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px)); } .pkp_block .tic-card > a:hover{background:var(--tic-green-pale);} /* Varian kartu berisi beberapa tautan (menu bertingkat). Pemakaian: .tic-card > .tic-list-in > beberapa */ .pkp_block .tic-list-in{ background:#fff; clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px)); } .pkp_block .tic-list-in a{ display:block; background:none; color:#111 !important; /* teks tautan: hitam */ font-size:14px; font-weight:500; padding:11px 15px; border-radius:0; text-decoration:none !important; border-bottom:1px solid #e6ebe7; } .pkp_block .tic-list-in a:last-child{border-bottom:0;} .pkp_block .tic-list-in a:hover{ background:var(--tic-green-pale); color:#111 !important; } /* Ikon dokumen digambar langsung di CSS, jadi tidak perlu unggah file. Ganti warna: ubah kode %2312903c di bawah (itu #12903c). */ .pkp_block .tic-card-ico{ flex:0 0 34px; height:42px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 44' fill='none' stroke='%2312903c' stroke-width='2.5' stroke-linecap='round'%3E%3Crect x='2' y='2' width='32' height='40' rx='4'/%3E%3Cline x1='9' y1='12' x2='27' y2='12'/%3E%3Cline x1='9' y1='19' x2='27' y2='19'/%3E%3Cline x1='9' y1='26' x2='27' y2='26'/%3E%3Cline x1='9' y1='33' x2='21' y2='33'/%3E%3C/svg%3E") center/contain no-repeat; } /* --- DAFTAR UNDUHAN DI SIDEBAR -------------------------------------- Pemakaian:
berisi beberapa biasa. Sengaja tidak memakai