Diposting oleh : Media Center pada tanggal : 02 Januari Loading pengumuman... /* multi pop up by wendy code */ .wcIconNotif{position:relative;width:35px;height:35px;display:flex;left:-10px} @media (min-width:1280px){.wcIconNotif{left:0}} .wcIconNotif path{fill:#ffffff} .wcIconNotif:before{content:attr(aria-label);position:relative;display:flex;padding:5px;font-size:10px;width:13px;height:13px;background-color:#e40101;color:#fefefe;justify-content: center;align-items: center;border-radius:50%;position:relative;top:-7px;left:9px;} .fullClose{display:block;position:fixed;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .1s ease;background:transparent;opacity:0;visibility:hidden} .wcNotif{position:fixed;opacity:0;visibility:hidden;z-index:999999;overflow-y:auto;top:0;right:20px;background:#fff;border:1px solid #ddd;width:350px;height:auto;max-height:400px;display:block;border-radius:3px;color:#48525c;box-shadow:10px 10px 35px rgba(0,0,0,0.1),-10px -10px 35px rgba(0,0,0,0.1);transition:all .3s ease;} .wcNotif:before{content:"";position:fixed;top:0;right:30px;border:10px solid;border-color:transparent transparent #fff transparent;opacity:0;visibility:hidden;transition:all .3s ease;} .wcNotif li{border-bottom:1px solid #f1f2f4;padding:10px 20px 10px 0;display:block;align-items:center;margin:0 20px 0 -15px} .wcNotifStart .more{margin:5px 0 0 -5px;font-size:12px} #wcCheckPop:checked ~ .wcNotif{visibility:visible;opacity:1;top:80px} #wcCheckPop:checked ~ .wcNotif:before{visibility:visible;opacity:1;top:62px} #wcCheckPop:checked ~ .wcNotif + .fullClose{visibility:visible;opacity:1} #wcCheckPop,.wcPopMenu{display:none} .wcPopMore{display:flex;align-items:center; font-weight:900; color:#262d3d;padding:0 5px} .wcPopMore span{flex-grow:1} .accorIcon{position:relative;flex-shrink:0; display:flex;align-items:center;justify-content:center; width:12px;height:12px;margin-right:15px} .wcPopMenu:checked ~ .wcPopMore span{color:#f89000} .wcPopMenu:checked ~ .wcPopMore .accorIcon:before, .wcPopMenu:checked ~ .wcPopMore .accorIcon:after{background-color:#f89000} .wcPopMenu:checked ~ .wcPopMore .accorIcon:after{visibility:hidden;opacity:0} .wcNotifStart .content{position:relative;margin-left:-30px;padding-left:32px;overflow:hidden;max-height:0; transition:all .2s ease; opacity:.8} .wcPopMenu:checked ~ .content{max-height:100vh;padding-top:15px;padding-bottom:8px} @media screen and (max-width:480px){ #wcCheckPop:checked ~ .wcNotif{top:0} .wcNotifStart{border-top:1px solid #f1f2f4;margin-top:30px} .wcNotif{min-height:100vh;width:100%;top:0;right:0;bottom:0;left:0;padding-top:25px} .wcNotifClose{position:absolute;top:8px;right:15px;width:40px;height:40px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%2348525c'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:35px;background-position:center;} .wcNotifClose:before{content:'Close';position:relative;right:35px;top:10px;font-size:15px;color:#48525c;} .wcNotif:before{display:none} } /* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */ .darkMode .wcIconNotif path{fill:#989b9f} .darkMode .wcNotif,.darkMode .wcPopMore{background:#2d2d30;color:#fefefe;border:none} .darkMode .wcNotif:before{border-color:transparent transparent #2d2d30 transparent} .darkMode .wcNotif li,.darkMode .wcNotifStart{border-color:rgba(255,255,255,.1)} /* === TAMBAHAN CSS UNTUK GAYA KONTEN POPUP === */ /* Memberi jarak dan tinggi baris yang nyaman untuk dibaca */ .wcNotif .content { line-height: 1.6; color: #333; /* Warna teks agar lebih mudah dibaca */ } /* Mengatur agar gambar tidak keluar dari kotak dan responsif */ .wcNotif .content img { max-width: 100%; height: auto; display: block; margin: 10px 0; border-radius: 5px; /* Sedikit lengkungan di sudut gambar */ } /* Memberi jarak antar paragraf */ .wcNotif .content p { margin: 0 0 1em 0; } .wcNotif .content p:last-child { margin-bottom: 0; } /* Memberi gaya pada blockquote (kutipan) */ .wcNotif .content blockquote { margin: 15px 0; padding: 10px 15px; background-color: #f1f2f4; /* Warna latar belakang kutipan */ border-left: 5px solid #d1d1d1; /* Garis di sebelah kiri kutipan */ font-style: italic; } /* Memberi gaya pada daftar (list) */ .wcNotif .content ul, .wcNotif .content ol { padding-left: 20px; margin: 10px 0; } /* Dark Mode (jika Anda menggunakan dark mode) */ .darkMode .wcNotif .content { color: #f1f1f1; } .darkMode .wcNotif .content blockquote { background-color: #3a3a3a; border-color: #555; } /* Styling untuk Ikon Akun User================================================== */ .account-icon-container { display: flex; align-items: center; justify-content: center; margin-left: 15px; /* Sesuaikan posisi ikon di navbar */ cursor: pointer; position: relative; /* PENTING: Untuk penempatan popup kecil di bawahnya */ right: 10px; } .account-icon { color: #fff; /* Warna ikon, sesuaikan dengan warna navbar Anda */ text-decoration: none; display: flex; align-items: center; /* Tambahkan transisi untuk efek yang lebih halus jika ada perubahan lain */ transition: color 0.2s ease; /* Ditambahkan */ } /* Pertahankan warna ikon saat di-hover, aktif, atau difokuskan */ .account-icon:hover, .account-icon:active, .account-icon:focus { color: #fff; /* Tetap putih atau warna yang diinginkan */ outline: none; /* Menghilangkan border fokus yang mungkin muncul */ } /* Styling untuk Simple Modal/Popup Kecil */ .simple-modal { display: none; /* Sembunyikan popup secara default */ position: absolute; /* Posisikan relatif terhadap account-icon-container */ background-color: #ffffff; /* Latar belakang putih */ min-width: 180px; /* Lebar minimum popup, sesuaikan jika perlu */ box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.1); /* Bayangan lembut */ z-index: 1000; /* Pastikan di atas konten lain */ border-radius: 8px; /* Sudut membulat */ right: 8px; /* Posisikan di kanan ikon */ top: 100%; /* Posisikan tepat di bawah ikon */ margin-top: 10px; /* Jarak antara ikon dan popup */ padding: 5px 0; /* Padding vertikal di dalam popup */ white-space: nowrap; /* Mencegah teks patah baris */ } .simple-modal-content a { color: #333333; /* Warna teks hitam */ padding: 8px 16px; /* Menambah padding untuk area klik yang lebih baik */ text-decoration: none; display: flex; /* Untuk menempatkan ikon dan teks sejajar */ align-items: center; gap: 8px; /* Memberi jarak antara ikon dan teks */ background-color: transparent; /* Latar belakang tombol transparan */ transition: background-color 0.2s ease; } .simple-modal-content a svg { vertical-align: middle; /* Memastikan ikon sejajar dengan teks */ /* Hapus properti style inline dari HTML dan pindahkan ke CSS */ } .simple-modal-content a:hover { background-color: #f1f1f1; /* Efek hover abu-abu terang */ } /* Tampilkan popup saat aktif */ .simple-modal.show { display: block; } Berbagi Postingan Terkait Loading...
